Merged in CR/optimize_performance_2 (pull request #391)

CR/optimize performance 2

8 files changed, 39 insertions, 10 deletions

diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx
index ebd41a67..dff61b24 100644
--- a/src/lib/brand/components/BrandCard.jsx
+++ b/src/lib/brand/components/BrandCard.jsx
@@ -11,6 +11,7 @@ const BrandCard = ({ brand }) => {
       className={`py-1 px-2  border-gray_r-6 flex justify-center items-center hover:scale-110 transition duration-500 ease-in-out ${
         isMobile ? 'h-16' : 'h-24'
       }`}
+      aria-label={brand.name}
     >
       {brand.logo && (
         <NextImage
@@ -20,6 +21,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..2291398d 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -73,7 +73,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
 
   if (variant == 'vertical') {
     return (
-      <div className='rounded shadow-sm border border-gray_r-4 bg-white h-[330px] md:h-[380px]'>
+      <div className='rounded shadow-sm border border-gray_r-4 bg-white h-[330px] md:h-[380px]' aria-label='Produk'>
         <Link href={URL.product} className='border-b border-gray_r-4 relative'>
           <div className='relative'>
             <Image
@@ -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' ||
@@ -150,26 +154,28 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
         <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5'>
           <div className='flex justify-between '>
             {product?.manufacture?.name ? (
-              <Link href={URL.manufacture} className='mb-1 mt-1 truncate'>
+              <Link href={URL.manufacture} className='mb-1 mt-1 truncate' aria-label={product.manufacture.name}>
                 {product.manufacture.name}
               </Link>
             ) : (
               <div>-</div>
             )}
             {product?.isInBu && (
-              <Link href='/panduan-pick-up-service' className='group'>
+              <Link href='/panduan-pick-up-service' className='group' aria-label='pickup now'>
                 <Image
                   src='/images/PICKUP-NOW.png'
                   className='group-hover:scale-105 transition-transform duration-200'
                   alt='pickup now'
                   width={90}
                   height={12}
+                  loading='eager'
                 />
               </Link>
             )}
           </div>
           <Link
             href={URL.product}
+            aria-label={product?.name}
             className={`mb-2 !text-gray_r-12 leading-6 block line-clamp-3 h-[64px]`}
             title={product?.name}
           >
@@ -194,6 +200,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     rel='noopener noreferrer'
                     target='_blank'
                     href={callForPriceWhatsapp}
+                    aria-label='Call for Inquiry'
                   >
                     Call for Inquiry
                   </a>
@@ -217,6 +224,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   rel='noopener noreferrer'
                   target='_blank'
                   href={callForPriceWhatsapp}
+                  aria-label='Call for Inquiry'
                 >
                   Call for Inquiry
                 </a>
@@ -251,7 +259,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
     return (
       <div className='flex bg-white'>
         <div className='w-4/12'>
-          <Link href={URL.product} className='relative'>
+          <Link href={URL.product} className='relative' aria-label={product?.name}>
             <div className='relative'>
               <Image
                 src={image}
@@ -267,6 +275,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 +287,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 +307,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'>
                 {' '}
@@ -308,7 +319,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           )}
           {product?.manufacture?.name ? (
             <div className='flex justify-between'>
-              <Link href={URL.manufacture} className='mb-1'>
+              <Link href={URL.manufacture} className='mb-1' aria-label={product?.manufacture.name}>
                 {product.manufacture.name}
               </Link>
               {/* {product?.is_in_bu && (
@@ -324,6 +335,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           )}
           <Link
             href={URL.product}
+            aria-label={product?.name}
             className={`mb-3 !text-gray_r-12 leading-6 line-clamp-3`}
           >
             {product?.name}
@@ -350,6 +362,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     rel='noopener noreferrer'
                     target='_blank'
                     href={callForPriceWhatsapp}
+                    aria-label='Call for Inquiry'
                   >
                     Call for Inquiry
                   </a>
@@ -373,6 +386,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   rel='noopener noreferrer'
                   target='_blank'
                   href={callForPriceWhatsapp}
+                  aria-label='Call for Inquiry'
                 >
                   Call for Inquiry
                 </a>