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