Improve home page performance

1 files changed, 16 insertions, 20 deletions

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>