diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/_app.jsx | 1 | ||||
| -rw-r--r-- | src/pages/index.jsx | 36 |
2 files changed, 17 insertions, 20 deletions
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index 4c4fed89..03147219 100644 --- a/src/pages/_app.jsx +++ b/src/pages/_app.jsx @@ -1,4 +1,5 @@ import '../styles/globals.css' +import 'react-loading-skeleton/dist/skeleton.css' import NextProgress from 'next-progress' import { useRouter, Router } from 'next/router' import { AnimatePresence, motion } from 'framer-motion' diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 12d2ab46..47a0a493 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -7,6 +7,8 @@ import DelayRender from '@/core/components/elements/DelayRender/DelayRender' import { HeroBannerSkeleton } from '@/components/skeleton/BannerSkeleton' import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton' import PromotinProgram from '@/lib/promotinProgram/components/HomePage' +import PreferredBrandSkeleton from '@/lib/home/components/Skeleton/PreferredBrandSkeleton' +import { FlashSaleSkeleton } from '@/lib/flashSale/skeleton/FlashSaleSkeleton' const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout')) const HeroBanner = dynamic(() => import('@/components/ui/HeroBanner'), { @@ -19,9 +21,13 @@ const PopularProduct = dynamic(() => import('@/components/ui/PopularProduct'), { loading: () => <PopularProductSkeleton /> }) -const PreferredBrand = dynamic(() => import('@/lib/home/components/PreferredBrand')) +const PreferredBrand = dynamic(() => import('@/lib/home/components/PreferredBrand'), { + loading: () => <PreferredBrandSkeleton /> +}) -const FlashSale = dynamic(() => import('@/lib/flashSale/components/FlashSale')) +const FlashSale = dynamic(() => import('@/lib/flashSale/components/FlashSale'), { + loading: () => <FlashSaleSkeleton /> +}) const BannerSection = dynamic(() => import('@/lib/home/components/BannerSection')) const CategoryHomeId = dynamic(() => import('@/lib/home/components/CategoryHomeId')) const CustomerReviews = dynamic(() => import('@/lib/review/components/CustomerReviews')) @@ -66,22 +72,12 @@ export default function Home() { </div> <div className='my-16 flex flex-col gap-y-16'> - <DelayRender renderAfter={400}> - <PreferredBrand /> - </DelayRender> - <DelayRender renderAfter={600}> - <FlashSale /> - </DelayRender> - <DelayRender renderAfter={600}> - <PromotinProgram /> - </DelayRender> - <DelayRender renderAfter={1000}> - <CategoryHomeId /> - <BannerSection /> - </DelayRender> - <DelayRender renderAfter={1200}> - <CustomerReviews /> - </DelayRender> + <PreferredBrand /> + <FlashSale /> + <PromotinProgram /> + <CategoryHomeId /> + <BannerSection /> + <CustomerReviews /> </div> </div> </DesktopView> @@ -98,8 +94,8 @@ export default function Home() { <FlashSale /> </DelayRender> <DelayRender renderAfter={600}> - <PromotinProgram /> - </DelayRender> + <PromotinProgram /> + </DelayRender> <DelayRender renderAfter={800}> <PopularProduct /> </DelayRender> |