update performance desktop

14 files changed, 100 insertions, 65 deletions

diff --git a/src/components/ui/HeroBanner.jsx b/src/components/ui/HeroBanner.jsx
index 2eea5915..3025fc1e 100644
--- a/src/components/ui/HeroBanner.jsx
+++ b/src/components/ui/HeroBanner.jsx
@@ -7,9 +7,7 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 
 import Image from 'next/image';
 import { useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
 
-import { bannerApi } from '@/api/bannerApi';
 import Link from '@/core/components/elements/Link/Link';
 import DesktopView from '@/core/components/views/DesktopView';
 import MobileView from '@/core/components/views/MobileView';
@@ -52,10 +50,6 @@ const HeroBanner = () => {
     pagination: { dynamicBullets: false, clickable: true },
   };
 
-  const customLoader = ({ src }) => {
-    return src; // Loader yang mengembalikan URL gambar asli
-  };
-
   const BannerComponent = useMemo(() => {
     if (!heroBanner) return null;
 
@@ -63,14 +57,11 @@ const HeroBanner = () => {
       <SwiperSlide key={index}>
         <Link href={banner.url} className='w-full h-auto'>
           <Image
-            loader={customLoader}
             src={banner.image}
             alt={banner.name}
             width={1152}
             height={768}
-            className='w-full h-auto'
-            priority={index === 0}
-            loading={index === 0 ? 'eager' : 'lazy'}
+            loading='eager'
             placeholder='blur'
             blurDataURL='/images/indoteknik-placeholder.png'
             sizes='(max-width: 768px) 100vw, 50vw'
diff --git a/src/components/ui/HeroBannerSecondary.jsx b/src/components/ui/HeroBannerSecondary.jsx
index 6074c9a6..0daf9c61 100644
--- a/src/components/ui/HeroBannerSecondary.jsx
+++ b/src/components/ui/HeroBannerSecondary.jsx
@@ -1,10 +1,8 @@
 import Link from '@/core/components/elements/Link/Link';
 import { getRandomInt } from '@/utils/getRandomInt';
 import Image from 'next/image';
-import { useMemo, useEffect, useState } from 'react';
-import { useQuery } from 'react-query';
+import { useEffect, useMemo, useState } from 'react';
 import { HeroBannerSkeleton } from '../skeleton/BannerSkeleton';
-import { bannerApi } from '@/api/bannerApi';
 
 const HeroBannerSecondary = () => {
   const [heroBannerSecondary, setHeroBannerSecondary] = useState([]);
@@ -45,7 +43,7 @@ const HeroBannerSecondary = () => {
           height={1024}
           alt={heroBannerSecondary[randomIndex]?.name}
           className='object-cover object-center h-full'
-          loading='lazy'
+          loading='eager'
           placeholder='blur'
           blurDataURL='/images/indoteknik-placeholder.png'
           sizes='(max-width: 768px) 100vw, 50vw'
diff --git a/src/core/components/elements/Navbar/Navbar.jsx b/src/core/components/elements/Navbar/Navbar.jsx
index 57904498..59f743a2 100644
--- a/src/core/components/elements/Navbar/Navbar.jsx
+++ b/src/core/components/elements/Navbar/Navbar.jsx
@@ -3,10 +3,12 @@ import dynamic from 'next/dynamic'
 const NavbarDesktop = dynamic(() => import('./NavbarDesktop'))
 const NavbarMobile = dynamic(() => import('./NavbarMobile'))
 
-const Navbar = () => {
+const Navbar = ({isMobile} ) => {
+  
+  if(isMobile) return <NavbarMobile />
+
   return (
     <>
-      <NavbarMobile />
       <NavbarDesktop />
     </>
   )
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index fa3df5bf..f4b0d5e1 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -12,12 +12,9 @@ import {
   MenuButton,
   MenuItem,
   MenuList,
-  useDisclosure
+  useDisclosure,
 } from '@chakra-ui/react';
-import {
-  ChevronDownIcon,
-  HeartIcon
-} from '@heroicons/react/24/outline';
+import { ChevronDownIcon, HeartIcon } from '@heroicons/react/24/outline';
 import dynamic from 'next/dynamic';
 import { default as Image, default as NextImage } from 'next/image';
 import { useRouter } from 'next/router';
@@ -81,21 +78,17 @@ const NavbarDesktop = () => {
     };
 
     window.addEventListener('scroll', handleScroll);
+
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
   }, []);
 
   useEffect(() => {
-    const handleScroll = () => {
-      setIsTop(window.scrollY < 100);
-    };
-
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
+    if (auth) {
+      loadCart(auth.id);
+    }
+  }, [auth]);
 
   useEffect(() => {
     setPendingTransactions(data);
@@ -115,20 +108,22 @@ const NavbarDesktop = () => {
   }, [product, router]);
 
   useEffect(() => {
-    const handleCartChange = () => {
-      const cart = async () => {
-        const listCart = await getCountCart();
-        setCartCount(listCart);
-      };
-      cart();
-    };
-    handleCartChange();
-
-    window.addEventListener('localStorageChange', handleCartChange);
-
-    return () => {
-      window.removeEventListener('localStorageChange', handleCartChange);
-    };
+    // const handleCartChange = () => {
+    //   const cart = async () => {
+    //     const listCart = await getCountCart();
+    //     setCartCount(listCart);
+    //   };
+    //   cart();
+    // };
+    // handleCartChange();
+
+    setCartCount(cart?.products?.length)
+
+    // window.addEventListener('localStorageChange', handleCartChange);
+
+    // return () => {
+    //   window.removeEventListener('localStorageChange', handleCartChange);
+    // };
   }, [transactions.data, cart]);
 
   useEffect(() => {
@@ -202,7 +197,9 @@ const NavbarDesktop = () => {
               src={IndoteknikLogo}
               alt='Indoteknik Logo'
               width={210}
-              height={210 / 3}
+              height={70}
+              loading='eager'
+              priority={true}
             />
           </Link>
           <div className='flex-1 flex items-center'>
@@ -236,6 +233,7 @@ const NavbarDesktop = () => {
                 alt='Whatsapp'
                 width={48}
                 height={48}
+                loading='eager'
               />
               <div>
                 <div className='font-semibold'>Whatsapp</div>
@@ -284,6 +282,7 @@ const NavbarDesktop = () => {
                       quality={100}
                       // className={`fixed ${isTop ? 'md:top-[145px] lg:top-[160px] ' : 'lg:top-[85px] top-[80px]'} rounded-3xl md:left-1/4 lg:left-1/4 xl:left-1/4 left-2/3 w-40 h-12  p-2 z-50 transition-all duration-300 animate-pulse`}
                       className={`inline-block relative -top-8 transition-all duration-300 z-20 animate-pulse`}
+                      loading='eager'
                     />
                   </div>
                 )}
@@ -394,6 +393,7 @@ const SocialMedias = () => (
           // alt='Youtube - Indoteknik.com'
           width={24}
           height={24}
+          loading='eager'
         />
       </a>
       <a
@@ -406,6 +406,7 @@ const SocialMedias = () => (
           // alt='TikTok - Indoteknik.com'
           width={24}
           height={24}
+          loading='eager'
         />
       </a>
       {/* <a target='_blank' rel='noreferrer' href={whatsappUrl(null)}>
@@ -426,6 +427,7 @@ const SocialMedias = () => (
           // alt='Facebook - Indoteknik.com'
           width={24}
           height={24}
+          loading='eager'
         />
       </a>
       <a
@@ -438,6 +440,7 @@ const SocialMedias = () => (
           // alt='Instagram - Indoteknik.com'
           width={24}
           height={24}
+          loading='eager'
         />
       </a>
       <a
@@ -450,6 +453,7 @@ const SocialMedias = () => (
           // alt='Linkedin - Indoteknik.com'
           width={24}
           height={24}
+          loading='eager'
         />
       </a>
       <a
@@ -462,6 +466,7 @@ const SocialMedias = () => (
           // alt='Maps - Indoteknik.com'
           width={24}
           height={24}
+          loading='eager'
         />
       </a>
     </div>
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index 90314671..47182a47 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -12,30 +12,44 @@ import { useEffect, useState } from 'react';
 import MobileView from '../../views/MobileView';
 import Link from '../Link/Link';
 import TopBanner from './TopBanner';
+import { useCartStore } from '~/modules/cart/stores/useCartStore';
+import useAuth from '@/core/hooks/useAuth';
 
 const Search = dynamic(() => import('./Search'));
 
 const NavbarMobile = () => {
   const { Sidebar, open } = useSidebar();
+  const auth = useAuth();
 
   const [cartCount, setCartCount] = useState(0);
+  const { loadCart, cart, summary, updateCartItem } = useCartStore();
 
-  useEffect(() => {
-    const handleCartChange = () => {
-      const cart = async () => {
-        const listCart = await getCountCart();
-        setCartCount(listCart);
-      };
-      cart();
-    };
-    handleCartChange();
+  // useEffect(() => {
+  //   const handleCartChange = () => {
+  //     const cart = async () => {
+  //       const listCart = await getCountCart();
+  //       setCartCount(listCart);
+  //     };
+  //     cart();
+  //   };
+  //   handleCartChange();
+
+  //   window.addEventListener('localStorageChange', handleCartChange);
 
-    window.addEventListener('localStorageChange', handleCartChange);
+  //   return () => {
+  //     window.removeEventListener('localStorageChange', handleCartChange);
+  //   };
+  // }, []);
 
-    return () => {
-      window.removeEventListener('localStorageChange', handleCartChange);
-    };
-  }, []);
+  useEffect(() => {
+    if(auth){
+      loadCart(auth?.id);
+    }
+  }, [auth]);
+
+  useEffect(() => {
+    setCartCount(cart?.products?.length);
+  }, [cart]);
 
   return (
     <MobileView>
@@ -48,6 +62,7 @@ const NavbarMobile = () => {
               alt='Indoteknik Logo'
               width={120}
               height={40}
+              loading='eager'
             />
           </Link>
           <div className='flex gap-x-3'>
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index 1b62bf05..2998fa63 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -112,7 +112,7 @@ const BasicLayout = ({ children }) => {
           onAnimationEnd={() => setHighlight(false)}
         />
       )}
-      <Navbar />
+      <Navbar isMobile = {isMobile} />
       <AnimationLayout>
         {children}
         <div
@@ -149,6 +149,7 @@ const BasicLayout = ({ children }) => {
                 className='block sm:hidden'
                 width={36}
                 height={36}
+                loading='eager'
               />
               <Image
                 src='/images/socials/WHATSAPP.svg'
@@ -156,6 +157,7 @@ const BasicLayout = ({ children }) => {
                 className='hidden sm:block'
                 width={44}
                 height={44}
+                loading='eager'
               />
             </a>
           </div>
diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx
index ebd41a67..8bb4b904 100644
--- a/src/lib/brand/components/BrandCard.jsx
+++ b/src/lib/brand/components/BrandCard.jsx
@@ -20,6 +20,7 @@ const BrandCard = ({ brand }) => {
           height={500}
           quality={85}
           className='h-full w-[122px] object-contain object-center'
+          loading='eager'
         />
       )}
       {!brand.logo && (
diff --git a/src/lib/flashSale/components/FlashSale.jsx b/src/lib/flashSale/components/FlashSale.jsx
index 6d90cad7..f4be279e 100644
--- a/src/lib/flashSale/components/FlashSale.jsx
+++ b/src/lib/flashSale/components/FlashSale.jsx
@@ -47,6 +47,7 @@ const FlashSale = () => {
                   width={1080}
                   height={192}
                   className='w-full rounded mb-4 hidden sm:block'
+                  loading='eager'
                 />
                 <Image
                   src={flashSale.bannerMobile}
@@ -54,6 +55,7 @@ const FlashSale = () => {
                   width={256}
                   height={48}
                   className='w-full rounded mb-4 block sm:hidden'
+                  loading='eager'
                 />
                 <FlashSaleProduct
                   flashSaleId={flashSale.pricelistId}
diff --git a/src/lib/home/components/BannerSection.jsx b/src/lib/home/components/BannerSection.jsx
index 303b5c4b..898f1bf5 100644
--- a/src/lib/home/components/BannerSection.jsx
+++ b/src/lib/home/components/BannerSection.jsx
@@ -51,6 +51,7 @@ const BannerSection = () => {
               src={banner.image}
               alt={banner.name}
               className='h-auto w-full rounded'
+              loading='eager'
             />
           </Link>
         ))}
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index d72fe1f1..b6994f60 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -85,6 +85,7 @@ const CategoryDynamic = () => {
                                 width={90}
                                 height={30}
                                 className='object-fit p-4'
+                                loading='eager'
                               />
                               <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
                                 <h2 className='font-semibold text-lg mr-2'>
@@ -127,6 +128,7 @@ const CategoryDynamic = () => {
                                           height={40}
                                           placeholder='blur'
                                           blurDataURL='/icon.jpg'
+                                          loading='eager'
                                         />
                                         <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
                                           <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>
diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx
index 67ae6f5f..5d9e872c 100644
--- a/src/lib/home/components/CategoryDynamicMobile.jsx
+++ b/src/lib/home/components/CategoryDynamicMobile.jsx
@@ -90,6 +90,7 @@ const CategoryDynamicMobile = () => {
                           width={30}
                           height={30}
                           className=''
+                          loading='eager'
                         />
                         <div className='bagian-judul flex flex-col justify-center items-start gap-1 ml-2'>
                           <h2 className='font-semibold text-[10px] line-clamp-1'>
@@ -123,6 +124,7 @@ const CategoryDynamicMobile = () => {
                             width={40}
                             height={40}
                             className='p-2'
+                            loading='eager'
                           />
                           <div className='bagian-judul flex flex-col justify-center items-start gap-1 break-words line-clamp-2 group-hover:text-red-500'>
                             <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'>
diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index fc23bf78..d8bf3edb 100644
--- a/src/lib/home/components/PromotionProgram.jsx
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -69,7 +69,8 @@ const BannerSection = () => {
                 quality={85}
                 src={banner.image}
                 alt={banner.name}
-                className='h-auto  w-full rounded hover:scale-105 transition duration-500 ease-in-out'
+                className='rounded hover:scale-105 transition duration-500 ease-in-out'
+                loading='eager'
               />
             </Link>
           ))}
@@ -82,12 +83,13 @@ const BannerSection = () => {
             <SwiperSlide key={banner.id}>
               <Link key={banner.id} href={banner.url}>
                 <Image
-                  width={439}
-                  height={150}
-                  quality={85}
+                  width={350}
+                  height={100}
+                  quality={70}
                   src={banner.image}
                   alt={banner.name}
-                  className='h-auto  w-full rounded '
+                  className='rounded '
+                  loading='eager'
                 />
               </Link>
             </SwiperSlide>
diff --git a/src/lib/home/components/ServiceList.jsx b/src/lib/home/components/ServiceList.jsx
index b3cc8fe5..6d03a587 100644
--- a/src/lib/home/components/ServiceList.jsx
+++ b/src/lib/home/components/ServiceList.jsx
@@ -18,6 +18,7 @@ const ServiceList = () => {
                 src='/images/icon_service/ONE-STOP-SOLUTIONS.svg'
                 alt=''
                 className='h-20 w-20 rounded'
+                loading='eager'
               />
             </div>
             <div className=''>
@@ -43,6 +44,7 @@ const ServiceList = () => {
                 src='/images/icon_service/WARRANTY.svg'
                 alt=''
                 className='h-20 w-20 rounded'
+                loading='eager'
               />
             </div>
             <div>
@@ -68,6 +70,7 @@ const ServiceList = () => {
                 src='/images/icon_service/DUE-PAYMENT.svg'
                 alt=''
                 className='h-20 w-20 rounded'
+                loading='eager'
               />
             </div>
             <div>
@@ -93,6 +96,7 @@ const ServiceList = () => {
                 src='/images/icon_service/TAX.svg'
                 alt=''
                 className='h-20 w-20 rounded'
+                loading='eager'
               />
             </div>
             <div>
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 174e5cb1..4e80083b 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -90,6 +90,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     className='w-4 h-5 object-contain object-top   sm:h-6'
                     width={50}
                     height={50}
+                    loading='eager'
                   />
                 )}
               </div>
@@ -101,6 +102,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     className='w-11 h-6 object-contain object-top  ml-1 mr-1 sm:h-6'
                     width={50}
                     height={50}
+                    loading='eager'
                   />
                 )}
               </div>
@@ -115,6 +117,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   className='h-full'
                   width={1000}
                   height={100}
+                  loading='eager'
                 />
               </div>
               <div className='relative'>
@@ -129,6 +132,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                       src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
                       width={13}
                       height={5}
+                      loading='eager'
                     />
                     <span className='text-white text-[9px] md:text-[10px] font-semibold'>
                       {product?.flashSale?.tag != 'false' ||
@@ -164,6 +168,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   alt='pickup now'
                   width={90}
                   height={12}
+                  loading='eager'
                 />
               </Link>
             )}
@@ -267,6 +272,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                       className='w-4 h-5 object-contain object-top   sm:h-6'
                       width={50}
                       height={50}
+                      loading='eager'
                     />
                   )}
                 </div>
@@ -278,6 +284,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                       className='w-11 h-6 object-contain object-top  ml-1 sm:h-6'
                       width={50}
                       height={50}
+                      loading='eager'
                     />
                   )}
                 </div>
@@ -297,6 +304,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
                 width={15}
                 height={10}
+                loading='eager'
               />
               <span className='text-white text-xs font-semibold'>
                 {' '}