diff options
Diffstat (limited to 'src/pages/index.jsx')
| -rw-r--r-- | src/pages/index.jsx | 51 |
1 files changed, 37 insertions, 14 deletions
diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 1fe0e65a..31c6b240 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -8,7 +8,7 @@ import Seo from '@/core/components/Seo' 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')) @@ -24,6 +24,7 @@ const PopularProduct = dynamic(() => import('@/lib/home/components/PopularProduc const CategoryHomeId = dynamic(() => import('@/lib/home/components/CategoryHomeId'), { loading: () => <PopularProductSkeleton /> }) +const CustomerReviews = dynamic(() => import('@/lib/review/components/CustomerReviews')) export default function Home() { const fetchSecondHeroBanner = async () => await odooApi('GET', '/api/v1/banner?type=index-a-2') @@ -69,27 +70,49 @@ export default function Home() { <HeroBanner /> </div> <div className='w-3/12'> - <PopularProduct /> + <DelayRender renderAfter={200}> + <PopularProduct /> + </DelayRender> </div> </div> - <div className='my-16 flex flex-col gap-y-10'> - <PreferredBrand /> - <FlashSale /> - <CategoryHomeId /> - <CustomerReviews /> + <div className='my-16 flex flex-col gap-y-16'> + <DelayRender renderAfter={400}> + <PreferredBrand /> + </DelayRender> + <DelayRender renderAfter={600}> + <FlashSale /> + </DelayRender> + <DelayRender renderAfter={1000}> + <CategoryHomeId /> + </DelayRender> + <DelayRender renderAfter={1200}> + <CustomerReviews /> + </DelayRender> </div> </div> </DesktopView> <MobileView> - <HeroBanner /> - <div className='flex flex-col gap-y-6 my-6'> - <PreferredBrand /> - <FlashSale /> - <PopularProduct /> - <CategoryHomeId /> - <CustomerReviews /> + <DelayRender renderAfter={200}> + <HeroBanner /> + </DelayRender> + <div className='flex flex-col gap-y-12 my-6'> + <DelayRender renderAfter={400}> + <PreferredBrand /> + </DelayRender> + <DelayRender renderAfter={600}> + <FlashSale /> + </DelayRender> + <DelayRender renderAfter={800}> + <PopularProduct /> + </DelayRender> + <DelayRender renderAfter={1000}> + <CategoryHomeId /> + </DelayRender> + <DelayRender renderAfter={1200}> + <CustomerReviews /> + </DelayRender> </div> </MobileView> </BasicLayout> |