<Miqdad> balikin

1 files changed, 110 insertions, 138 deletions

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index fd960e8a..ba8c44af 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,6 +1,7 @@
 import { HeroBannerSkeleton } from '@/components/skeleton/BannerSkeleton';
 import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton';
 import Seo from '@/core/components/Seo';
+import DelayRender from '@/core/components/elements/DelayRender/DelayRender';
 import DesktopView from '@/core/components/views/DesktopView';
 import MobileView from '@/core/components/views/MobileView';
 import PreferredBrandSkeleton from '@/lib/home/components/Skeleton/PreferredBrandSkeleton';
@@ -9,118 +10,77 @@ import dynamic from 'next/dynamic';
 import { useRef } from 'react';
 import { getAuth } from '~/libs/auth';
 import MediaNews from '../lib/home/components/MediaNews';
-import { popularProductApi, popularProductApiSSR } from '@/api/productApi';
 
-/* ============================
- *  DYNAMIC IMPORT SETTINGS
- * ============================ */
-
-// Layout
 const BasicLayout = dynamic(() =>
   import('@/core/components/layouts/BasicLayout')
 );
 
-// Popup
-const PagePopupIformation = dynamic(
-  () => import('~/modules/popup-information'),
-  { ssr: false }
-);
-
-// CATEGORY (SSR TRUE)
-const CategoryPilihan = dynamic(
-  () => import('../lib/home/components/CategoryPilihan'),
-  { ssr: true }
+const PagePopupIformation = dynamic(() =>
+  import('~/modules/popup-information'), {
+    ssr: false
+  }
 );
 
-const CategoryDynamic = dynamic(
-  () => import('@/lib/home/components/CategoryDynamic'),
-  { ssr: true }
+const CategoryPilihan = dynamic(() =>
+  import('../lib/home/components/CategoryPilihan')
 );
-
-const CategoryDynamicMobile = dynamic(
-  () => import('@/lib/home/components/CategoryDynamicMobile'),
-  { ssr: true }
-);
-
-const CategoryHomeId = dynamic(
-  () => import('@/lib/home/components/CategoryHomeId'),
-  { ssr: true }
-);
-
-// PRODUCT (SSR TRUE)
-const PopularProduct = dynamic(
-  () => import('@/components/ui/PopularProduct'),
-  { loading: () => <PopularProductSkeleton />, ssr: true }
+const HeroBanner = dynamic(() => import('@/components/ui/HeroBanner'), {
+  loading: () => <HeroBannerSkeleton />,
+});
+const HeroBannerSecondary = dynamic(
+  () => import('@/components/ui/HeroBannerSecondary'),
+  {
+    loading: () => <HeroBannerSkeleton />,
+  }
 );
+const PopularProduct = dynamic(() => import('@/components/ui/PopularProduct'), {
+  loading: () => <PopularProductSkeleton />,
+});
 
 const PreferredBrand = dynamic(
   () => import('@/lib/home/components/PreferredBrand'),
-  { loading: () => <PreferredBrandSkeleton />, ssr: true }
+  {
+    loading: () => <PreferredBrandSkeleton />,
+  }
 );
 
 const FlashSale = dynamic(
   () => import('@/lib/flashSale/components/FlashSale'),
-  { ssr: true }
 );
 
 const ProgramPromotion = dynamic(
-  () => import('@/lib/home/components/PromotionProgram'),
-  { ssr: true }
+  () => import('@/lib/home/components/PromotionProgram')
 );
 
-// CSR ONLY COMPONENTS
-const HeroBanner = dynamic(
-  () => import('@/components/ui/HeroBanner'),
-  { loading: () => <HeroBannerSkeleton />, ssr: false }
+const BannerSection = dynamic(() =>
+  import('@/lib/home/components/BannerSection')
+);
+const CategoryHomeId = dynamic(
+  () => import('@/lib/home/components/CategoryHomeId')
 );
 
-const HeroBannerSecondary = dynamic(
-  () => import('@/components/ui/HeroBannerSecondary'),
-  { loading: () => <HeroBannerSkeleton />, ssr: false }
+const CategoryDynamic = dynamic(() =>
+  import('@/lib/home/components/CategoryDynamic')
 );
 
-const BannerSection = dynamic(
-  () => import('@/lib/home/components/BannerSection'),
-  { ssr: false }
+const CategoryDynamicMobile = dynamic(() =>
+  import('@/lib/home/components/CategoryDynamicMobile')
 );
 
 const CustomerReviews = dynamic(
   () => import('@/lib/review/components/CustomerReviews'),
   { ssr: false }
-);
-
-const ServiceList = dynamic(
-  () => import('@/lib/home/components/ServiceList'),
-  { ssr: false }
-);
-
-
-/* =====================================
- *   SERVER SIDE PROPS (HARUS DI LUAR)
- * ===================================== */
+); // need to ssr:false
+const ServiceList = dynamic(() => import('@/lib/home/components/ServiceList'), {
+  ssr: false,
+}); // need to ssr: false
 
- export async function getServerSideProps(context) {
-   const auth = getAuth(context.req);
-
-   const popularProducts = await popularProductApiSSR();
-
-   return {
-     props: {
-       auth,
-       popularProducts
-     }
-   };
- }
-
-
-/* ============================
- *  MAIN PAGE COMPONENT
- * ============================ */
-
-export default function Home({ auth, popularProducts }) {
+export default function Home({ categoryId }) {
   const bannerRef = useRef(null);
   const wrapperRef = useRef(null);
 
+  const auth = getAuth();
+
   const handleOnLoad = () => {
     wrapperRef.current.style.height =
       bannerRef.current?.querySelector(':first-child')?.clientHeight + 'px';
@@ -130,109 +90,121 @@ export default function Home({ auth, popularProducts }) {
     <>
       <BasicLayout>
         <Seo
-          title="Indoteknik.com: B2B Industrial Supply & Solution"
-          description="Temukan pilihan produk B2B Industri &amp; Alat Teknik untuk Perusahaan, UMKM &amp; Pemerintah dengan lengkap, mudah dan transparan."
+          title='Indoteknik.com: B2B Industrial Supply & Solution'
+          description='Temukan pilihan produk B2B Industri &amp; Alat Teknik untuk Perusahaan, UMKM &amp; Pemerintah dengan lengkap, mudah dan transparan.'
           additionalMetaTags={[
             {
-              name: "keywords",
+              name: 'keywords',
               content:
-                "indoteknik, indoteknik.com, toko teknik, toko perkakas, jual genset, jual fogging, jual krisbow, harga krisbow, harga alat safety, harga pompa air"
-            }
+                'indoteknik, indoteknik.com, toko teknik, toko perkakas, jual genset, jual fogging, jual krisbow, harga krisbow, harga alat safety, harga pompa air',
+            },
           ]}
-          openGraph={{
-            title: "Indoteknik.com: B2B Industrial Supply & Solution",
-            description:
-              "Temukan pilihan produk B2B Industri &amp; Alat Teknik untuk Perusahaan, UMKM &amp; Pemerintah dengan lengkap, mudah dan transparan.",
-            images: [
-              {
-                url: "https://indoteknik.com/icon.jpg",
-                width: 800,
-                height: 600,
-                alt: "indoteknik.com"
-              }
-            ]
-          }}
+          openGraph={
+            {
+              title : 'Indoteknik.com: B2B Industrial Supply & Solution',
+              description : 'Temukan pilihan produk B2B Industri &amp; Alat Teknik untuk Perusahaan, UMKM &amp; Pemerintah dengan lengkap, mudah dan transparan.',
+              images: [
+                {
+                  url: 'https://indoteknik.com/icon.jpg',
+                  width: 800,
+                  height: 600,
+                  alt: 'indoteknik.com',
+                },
+              ],
+            }
+          }
         />
 
         <PagePopupIformation />
 
-        {/* DESKTOP */}
         <DesktopView>
           <PagePopupInformation />
-
-          <div className="container mx-auto">
+          <div className='container mx-auto'>
             <div
-              className="flex min-h-[400px] h-[460px]"
+              className='flex min-h-[400px] h-[460px]'
               ref={wrapperRef}
               onLoad={handleOnLoad}
             >
-              <div className="w-2/12">
+              <div className='w-2/12'>
                 <HeroBannerSecondary />
               </div>
-
-              <div className="w-7/12 px-1" ref={bannerRef}>
+              <div className='w-7/12 px-1' ref={bannerRef}>
                 <HeroBanner />
               </div>
-
-              <div className="w-3/12">
-                <PopularProduct initialData={popularProducts} />
+              <div className='w-3/12'>
+                <DelayRender renderAfter={200}>
+                  <PopularProduct />
+                </DelayRender>
               </div>
             </div>
 
-            <div className="my-16 flex flex-col gap-y-8">
+            <div className='my-16 flex flex-col gap-y-8'>
               <ServiceList />
               <MediaNews />
-
-              <div id="flashsale">
+              <div id='flashsale'>
                 <PreferredBrand />
               </div>
-
               {!auth?.feature?.soApproval && (
                 <>
-                  <ProgramPromotion />
-                  <FlashSale />
+                  <DelayRender renderAfter={200}>
+                    <ProgramPromotion />
+                  </DelayRender>
+                  <DelayRender renderAfter={200}>
+                    <FlashSale />
+                  </DelayRender>
                 </>
               )}
-
+              {/* <PromotinProgram /> */}
               <CategoryPilihan />
               <CategoryDynamic />
               <CategoryHomeId />
-
               <BannerSection />
               <CustomerReviews />
             </div>
           </div>
         </DesktopView>
-
-        {/* MOBILE */}
         <MobileView>
           <PagePopupInformation />
-          <HeroBanner />
-
-          <div className="flex flex-col gap-y-4 my-6">
-            <ServiceList />
-            <MediaNews />
-
-            <div id="flashsale">
-              <PreferredBrand />
-            </div>
-
+          <DelayRender renderAfter={200}>
+            <HeroBanner />
+          </DelayRender>
+          <div className='flex flex-col gap-y-4 my-6'>
+            <DelayRender renderAfter={400}>
+              <ServiceList />
+              <MediaNews />
+            </DelayRender>
+            <DelayRender renderAfter={400}>
+              <div id='flashsale'>
+                <PreferredBrand />
+              </div>
+            </DelayRender>
             {!auth?.feature?.soApproval && (
               <>
-                <ProgramPromotion />
-                <FlashSale />
+                <DelayRender renderAfter={400}>
+                  <ProgramPromotion />
+                </DelayRender>
+                <DelayRender renderAfter={600}>
+                  <FlashSale />
+                </DelayRender>
               </>
             )}
-
-            <CategoryPilihan />
-            <CategoryDynamicMobile />
-
-            <PopularProduct initialData={popularProducts} />
-
-            <CategoryHomeId />
-            <BannerSection />
-
-            <CustomerReviews />
+            <DelayRender renderAfter={600}>
+              {/* <PromotinProgram /> */}
+            </DelayRender>
+            <DelayRender renderAfter={600}>
+              <CategoryPilihan />
+              <CategoryDynamicMobile />
+            </DelayRender>
+            <DelayRender renderAfter={800}>
+              <PopularProduct />
+            </DelayRender>
+            <DelayRender renderAfter={1000}>
+              <CategoryHomeId />
+              <BannerSection />
+            </DelayRender>
+            <DelayRender renderAfter={1200}>
+              <CustomerReviews />
+            </DelayRender>
           </div>
         </MobileView>
       </BasicLayout>