From dd5aec9566205c7fefec9c0cdbd04b0f8ecb67d0 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 16 May 2023 14:03:41 +0700
Subject: fixing layout

---
 src/pages/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/pages/index.jsx')

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 1fe0e65a..15a431b4 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -73,7 +73,7 @@ export default function Home() {
             </div>
           </div>
 
-          <div className='my-16 flex flex-col gap-y-10'>
+          <div className='my-16 flex flex-col gap-y-16'>
             <PreferredBrand />
             <FlashSale />
             <CategoryHomeId />
@@ -84,7 +84,7 @@ export default function Home() {
 
       <MobileView>
         <HeroBanner />
-        <div className='flex flex-col gap-y-6 my-6'>
+        <div className='flex flex-col gap-y-16 my-6'>
           <PreferredBrand />
           <FlashSale />
           <PopularProduct />
-- 
cgit v1.2.3


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/index.jsx')

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


From db6350771d7668f27db026c42e3885a097989f1e Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 16 May 2023 15:35:24 +0700
Subject: optimize render

---
 src/pages/index.jsx | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

(limited to 'src/pages/index.jsx')

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 8cf335c4..31c6b240 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -8,7 +8,6 @@ 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'))
@@ -25,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')
@@ -70,23 +70,23 @@ export default function Home() {
               <HeroBanner />
             </div>
             <div className='w-3/12'>
-              <DelayRender delay={200}>
+              <DelayRender renderAfter={200}>
                 <PopularProduct />
               </DelayRender>
             </div>
           </div>
 
           <div className='my-16 flex flex-col gap-y-16'>
-            <DelayRender delay={300}>
+            <DelayRender renderAfter={400}>
               <PreferredBrand />
             </DelayRender>
-            <DelayRender delay={400}>
+            <DelayRender renderAfter={600}>
               <FlashSale />
             </DelayRender>
-            <DelayRender delay={500}>
+            <DelayRender renderAfter={1000}>
               <CategoryHomeId />
             </DelayRender>
-            <DelayRender delay={600}>
+            <DelayRender renderAfter={1200}>
               <CustomerReviews />
             </DelayRender>
           </div>
@@ -94,21 +94,23 @@ export default function Home() {
       </DesktopView>
 
       <MobileView>
-        <HeroBanner />
+        <DelayRender renderAfter={200}>
+          <HeroBanner />
+        </DelayRender>
         <div className='flex flex-col gap-y-12 my-6'>
-          <DelayRender delay={300}>
+          <DelayRender renderAfter={400}>
             <PreferredBrand />
           </DelayRender>
-          <DelayRender delay={600}>
+          <DelayRender renderAfter={600}>
             <FlashSale />
           </DelayRender>
-          <DelayRender delay={900}>
+          <DelayRender renderAfter={800}>
             <PopularProduct />
           </DelayRender>
-          <DelayRender delay={1200}>
+          <DelayRender renderAfter={1000}>
             <CategoryHomeId />
           </DelayRender>
-          <DelayRender delay={1500}>
+          <DelayRender renderAfter={1200}>
             <CustomerReviews />
           </DelayRender>
         </div>
-- 
cgit v1.2.3