Latest Perf, Changes

components/product/ProductCard/ProductCard.tsx

@@ -13,8 +13,10 @@ interface Props {
   variant?: 'slim' | 'simple'
   imgWidth: number | string
   imgHeight: number | string
-  priority?: boolean
   imgLayout?: 'fixed' | 'intrinsic' | 'responsive' | undefined
+  imgPriority?: boolean
+  imgLoading?: 'eager' | 'lazy'
+  imgSizes?: string
 }
 
 const ProductCard: FC<Props> = ({
@@ -23,8 +25,10 @@ const ProductCard: FC<Props> = ({
   variant,
   imgWidth,
   imgHeight,
+  imgPriority,
+  imgLoading,
+  imgSizes,
   imgLayout = 'responsive',
-  priority,
 }) => {
   const src = p.images.edges?.[0]?.node?.urlOriginal!
   const { price } = usePrice({
@@ -46,13 +50,15 @@ const ProductCard: FC<Props> = ({
               </span>
             </div>
             <Image
+              quality="85"
+              width={imgWidth}
+              sizes={imgSizes}
+              height={imgHeight}
+              layout={imgLayout}
+              loading={imgLoading}
+              priority={imgPriority}
               src={p.images.edges?.[0]?.node.urlOriginal!}
               alt={p.images.edges?.[0]?.node.altText || 'Product Image'}
-              width={imgWidth}
-              height={imgHeight}
-              priority={priority}
-              layout={imgLayout}
-              quality="85"
             />
           </div>
         ) : (
@@ -73,13 +79,16 @@ const ProductCard: FC<Props> = ({
             </div>
             <div className={s.imageContainer}>
               <Image
-                className={s.image}
-                alt={p.name}
-                src={src}
-                width={imgWidth}
-                height={imgHeight}
-                priority={priority}
                 quality="85"
+                src={src}
+                alt={p.name}
+                className={s.image}
+                width={imgWidth}
+                sizes={imgSizes}
+                height={imgHeight}
+                layout={imgLayout}
+                loading={imgLoading}
+                priority={imgPriority}
               />
             </div>
           </>