From 7072d220bc86b56e76716d114e28af98219e3f69 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 17 Jan 2024 09:54:59 +0700
Subject: Update image for performance

---
 src-migrate/components/ui/image.tsx                | 43 ++++++++--------------
 .../product-card/components/ProductCard.tsx        |  1 -
 .../modules/product-detail/components/Image.tsx    |  1 -
 3 files changed, 15 insertions(+), 30 deletions(-)

(limited to 'src-migrate')

diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx
index c7ed0b0e..c1dde170 100644
--- a/src-migrate/components/ui/image.tsx
+++ b/src-migrate/components/ui/image.tsx
@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import NextImage, { ImageProps as NextImageProps } from 'next/image';
 import { useState } from 'react';
 
@@ -6,41 +5,29 @@ import clsxm from '~/libs/clsxm';
 
 type ImageProps = {
   rounded?: string;
-  classNames?: {
-    wrapper: string
-  }
 } & NextImageProps;
 
 const Image = (props: ImageProps) => {
-  const { alt, src, className, classNames, rounded, ...rest } = props;
+  const { alt, src, className, rounded, ...rest } = props;
   const [isLoading, setLoading] = useState(true);
 
   return (
-    <div
-      className={clsx(
-        'overflow-hidden',
-        isLoading ? 'animate-pulse' : '',
+    <NextImage
+      className={clsxm(
+        'duration-500 ease-in-out',
+        isLoading
+          ? 'scale-[1.02] blur-xl grayscale'
+          : 'scale-100 blur-0 grayscale-0',
         rounded,
-        classNames?.wrapper
+        className
       )}
-    >
-      <NextImage
-        className={clsxm(
-          'duration-500 ease-in-out',
-          isLoading
-            ? 'scale-[1.02] blur-xl grayscale'
-            : 'scale-100 blur-0 grayscale-0',
-          rounded,
-          className
-        )}
-        src={src}
-        alt={alt}
-        loading='lazy'
-        quality={100}
-        onLoadingComplete={() => setLoading(false)}
-        {...rest}
-      />
-    </div>
+      src={src}
+      alt={alt}
+      loading='lazy'
+      quality={100}
+      onLoadingComplete={() => setLoading(false)}
+      {...rest}
+    />
   );
 };
 export default Image;
\ No newline at end of file
diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx
index 8cd96ce8..c8a0b701 100644
--- a/src-migrate/modules/product-card/components/ProductCard.tsx
+++ b/src-migrate/modules/product-card/components/ProductCard.tsx
@@ -37,7 +37,6 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
             width={128}
             height={128}
             className='object-contain object-center h-full w-full'
-            classNames={{ wrapper: 'h-full' }}
           />
         </Link>
       </div>
diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
index 2c5e989b..6ec715d8 100644
--- a/src-migrate/modules/product-detail/components/Image.tsx
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -18,7 +18,6 @@ const Image = ({ product }: Props) => {
         width={256}
         height={256}
         className='object-contain object-center h-full w-full'
-        classNames={{ wrapper: 'h-full w-full' }}
         loading='eager'
         priority
       />
-- 
cgit v1.2.3