From 13ed5991179a497545cc5ed0ce98bb6a336c1b6a Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 16 May 2023 14:39:49 +0700
Subject: Delay Render components

---
 src/pages/index.jsx | 43 ++++++++++++++++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 11 deletions(-)

(limited to 'src/pages')

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