Enhanced Image Component

components/core/EnhancedImage/EnhancedImage.tsx

@@ -0,0 +1,42 @@
+import { FC } from 'react'
+import { useInView } from 'react-intersection-observer'
+import Image from 'next/image'
+
+type Props = Omit<
+  JSX.IntrinsicElements['img'],
+  'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading'
+> & {
+  src: string
+  quality?: string
+  priority?: boolean
+  loading?: readonly ['lazy', 'eager', undefined]
+  unoptimized?: boolean
+} & (
+    | {
+        width: number | string
+        height: number | string
+        unsized?: false
+      }
+    | {
+        width?: number | string
+        height?: number | string
+        unsized: true
+      }
+  )
+
+const EnhancedImage: FC<Props & JSX.IntrinsicElements['img']> = ({
+  ...props
+}) => {
+  const [ref, inView] = useInView({
+    triggerOnce: true,
+    rootMargin: '220px 0px',
+  })
+
+  return (
+    <div ref={ref}>
+      <Image {...props} />
+    </div>
+  )
+}
+
+export default EnhancedImage

components/core/EnhancedImage/index.ts

@@ -0,0 +1 @@
+export { default } from './EnhancedImage'

components/core/index.ts

@@ -9,3 +9,4 @@ export { default as Toggle } from './Toggle'
 export { default as Head } from './Head'
 export { default as HTMLContent } from './HTMLContent'
 export { default as I18nWidget } from './I18nWidget'
+export { default as EnhancedImage } from './EnhancedImage'

components/product/ProductCard/ProductCard.tsx

@@ -1,10 +1,10 @@
-import { FC, ReactNode, Component } from 'react'
+import React, { FC, ReactNode, Component } from 'react'
 import cn from 'classnames'
-import Image from 'next/image'
-import Link from 'next/link'
-import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
-import { Heart } from '@components/icon'
 import s from './ProductCard.module.css'
+import Link from 'next/link'
+import { Heart } from '@components/icon'
+import { EnhancedImage } from '@components/core'
+import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
 
 interface Props {
   className?: string
@@ -34,7 +34,7 @@ const ProductCard: FC<Props> = ({
             {p.name}
           </span>
         </div>
-        <Image
+        <EnhancedImage
           src={src}
           alt={p.name}
           width={imgWidth}
@@ -64,7 +64,7 @@ const ProductCard: FC<Props> = ({
           </div>
         </div>
         <div className={cn(s.imageContainer)}>
-          <Image
+          <EnhancedImage
             alt={p.name}
             className={cn('w-full object-cover', s['product-image'])}
             src={src}