Delay Render components

2 files changed, 49 insertions, 11 deletions

diff --git a/src/core/components/elements/DelayRender/DelayRender.js b/src/core/components/elements/DelayRender/DelayRender.js
new file mode 100644
index 00000000..c0ff0fc0
--- /dev/null
+++ b/src/core/components/elements/DelayRender/DelayRender.js
@@ -0,0 +1,17 @@
+const { useState, useEffect } = require('react')
+
+const DelayRender = ({ delay, children }) => {
+  const [showComponent, setShowComponent] = useState(false)
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setShowComponent(true)
+    }, delay)
+
+    return () => clearTimeout(timeout)
+  }, [delay])
+
+  return showComponent && children
+}
+
+export default DelayRender
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>