Latest Perf, Changes

components/product/ProductCard/ProductCard.module.css

@@ -1,5 +1,7 @@
 .root {
-  @apply relative max-h-full w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition-transform ease-linear cursor-pointer;
+  @apply relative max-h-full w-full box-border overflow-hidden
+  bg-no-repeat bg-center bg-cover transition-transform
+  ease-linear cursor-pointer;
   height: 100% !important;
 
   &:hover {
@@ -77,8 +79,8 @@
 
 .squareBg:before {
   @apply transition ease-in-out duration-500 bg-repeat-space w-full h-full block;
-  content: '';
   background-image: url('/bg-products.svg');
+  content: '';
 }
 
 .simple {
@@ -125,8 +127,12 @@
 }
 
 .imageContainer {
-  overflow: hidden;
   @apply flex items-center justify-center;
+  overflow: hidden;
+
+  & > div {
+    min-width: 100%;
+  }
 }
 
 .image {

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>
           </>

components/ui/Grid/Grid.module.css

@@ -1,6 +1,7 @@
 .root {
-  --row-height: calc(100vh - 80px - 56px);
+  --row-height: calc(100vh - 88px);
   @apply grid grid-cols-1 gap-0;
+  min-height: var(--row-height);
 
   @screen lg {
     @apply grid-cols-3 grid-rows-2;