From 16fed2e7d00252f5df3f9b5bdf0a5a2b2a094f76 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 8 Aug 2023 10:39:34 +0700
Subject: Improve home page performance

---
 src/pages/_app.jsx  |  1 +
 src/pages/index.jsx | 36 ++++++++++++++++--------------------
 2 files changed, 17 insertions(+), 20 deletions(-)

(limited to 'src/pages')

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>
-- 
cgit v1.2.3