Add lazy load on stock product

1 files changed, 6 insertions, 67 deletions

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 2ea08ea7..937f2746 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -20,7 +20,8 @@ import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 import useAuth from '@/core/hooks/useAuth'
 import ImageNext from 'next/image'
 import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
-import CountDown from '@/core/components/elements/CountDown/CountDown'
+import { LazyLoadComponent } from 'react-lazy-load-image-component'
+import ColumnsSLA from './ColumnsSLA'
 
 const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -184,7 +185,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
 
       setIsLoadingSLA(false)
     }
-    fetchData()
+    if (product.variantTotal == 1) fetchData()
   }, [product])
 
   return (
@@ -568,71 +569,9 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                         {variant.code}
                       </td>
                       <td>{variant.attributes.join(', ') || '-'}</td>
-                      <td>
-                        {isLoadingSLA ? (
-                          <div className='text-center'>
-                            <Spinner aria-label='Center-aligned spinner example' />
-                          </div>
-                        ) : variant?.sla?.qty > 0 ? (
-                          variant?.sla?.qty
-                        ) : (
-                          <a
-                            href={whatsappUrl('product', {
-                              name: variant.name,
-                              manufacture: product.manufacture?.name,
-                              url: createSlug('/shop/product/', product.name, product.id, true)
-                            })}
-                            className='text-danger-500 font-medium'
-                            target='_blank'
-                            rel='noreferrer noopener'
-                          >
-                            Tanya Admin
-                          </a>
-                        )}
-                      </td>
-                      <td className='flex justify-center'>
-                        {isLoadingSLA ? (
-                          <Button color='gray'>
-                            <Spinner aria-label='Alternate spinner button example' />
-                            <span className='pl-3'>Loading...</span>
-                          </Button>
-                        ) : variant?.sla?.slaDate != '-' ? (
-                          <button
-                            type='button'
-                            title={`Masa Persiapan Barang ${variant?.sla?.slaDate}`}
-                            className={`flex gap-x-1 items-center p-2 rounded-lg w-full ${
-                              variant?.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
-                            }`}
-                          >
-                            <div
-                              className={`flex-1 text-caption-1  ${
-                                variant?.sla?.slaDate === 'indent' ? 'text-white' : ''
-                              }`}
-                            >
-                              {variant?.sla?.slaDate}
-                            </div>
-                            <div className='flex-end'>
-                              <svg
-                                aria-hidden='true'
-                                fill='none'
-                                stroke='currentColor'
-                                stroke-width='1.5'
-                                className={`w-7 h-7 ${
-                                  variant?.sla?.slaDate === 'indent' ? 'text-white' : ''
-                                }`}
-                              >
-                                <path
-                                  d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
-                                  stroke-linecap='round'
-                                  stroke-linejoin='round'
-                                ></path>
-                              </svg>
-                            </div>
-                          </button>
-                        ) : (
-                          '-'
-                        )}
-                      </td>
+                      <LazyLoadComponent>
+                        <ColumnsSLA variant={variant} product={product} />
+                      </LazyLoadComponent>
                       <td>
                         {variant.price.discountPercentage > 0 &&
                           variant.price.priceDiscount > 0 && (