diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-05-16 14:39:49 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-05-16 14:39:49 +0700 |
| commit | 13ed5991179a497545cc5ed0ce98bb6a336c1b6a (patch) | |
| tree | 895d3c4adbe6d1e84ccc893ceacf556f643daeaf /src/pages | |
| parent | 65be79407260ab8775c369e2db81f49da1624991 (diff) | |
Delay Render components
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/index.jsx | 43 |
1 files changed, 32 insertions, 11 deletions
diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 15a431b4..8cf335c4 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -9,6 +9,7 @@ import { useQuery } from 'react-query' import odooApi from '@/core/api/odooApi' import Image from 'next/image' import CustomerReviews from '@/lib/review/components/CustomerReviews' +import DelayRender from '@/core/components/elements/DelayRender/DelayRender' const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout')) const FlashSale = dynamic(() => import('@/lib/flashSale/components/FlashSale')) @@ -69,27 +70,47 @@ export default function Home() { <HeroBanner /> </div> <div className='w-3/12'> - <PopularProduct /> + <DelayRender delay={200}> + <PopularProduct /> + </DelayRender> </div> </div> <div className='my-16 flex flex-col gap-y-16'> - <PreferredBrand /> - <FlashSale /> - <CategoryHomeId /> - <CustomerReviews /> + <DelayRender delay={300}> + <PreferredBrand /> + </DelayRender> + <DelayRender delay={400}> + <FlashSale /> + </DelayRender> + <DelayRender delay={500}> + <CategoryHomeId /> + </DelayRender> + <DelayRender delay={600}> + <CustomerReviews /> + </DelayRender> </div> </div> </DesktopView> <MobileView> <HeroBanner /> - <div className='flex flex-col gap-y-16 my-6'> - <PreferredBrand /> - <FlashSale /> - <PopularProduct /> - <CategoryHomeId /> - <CustomerReviews /> + <div className='flex flex-col gap-y-12 my-6'> + <DelayRender delay={300}> + <PreferredBrand /> + </DelayRender> + <DelayRender delay={600}> + <FlashSale /> + </DelayRender> + <DelayRender delay={900}> + <PopularProduct /> + </DelayRender> + <DelayRender delay={1200}> + <CategoryHomeId /> + </DelayRender> + <DelayRender delay={1500}> + <CustomerReviews /> + </DelayRender> </div> </MobileView> </BasicLayout> |