diff --git a/components/core/EnhancedImage/EnhancedImage.tsx b/components/core/EnhancedImage/EnhancedImage.tsx new file mode 100644 index 000000000..0c7bdd96d --- /dev/null +++ b/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 +}) => { + const [ref, inView] = useInView({ + triggerOnce: true, + rootMargin: '220px 0px', + }) + + return ( +
+ +
+ ) +} + +export default EnhancedImage diff --git a/components/core/EnhancedImage/index.ts b/components/core/EnhancedImage/index.ts new file mode 100644 index 000000000..48dbd6033 --- /dev/null +++ b/components/core/EnhancedImage/index.ts @@ -0,0 +1 @@ +export { default } from './EnhancedImage' diff --git a/components/core/index.ts b/components/core/index.ts index eea02cdec..670f5d58f 100644 --- a/components/core/index.ts +++ b/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' diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 0274fbc30..0ff4cd56c 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/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 = ({ {p.name} - {p.name} = ({
-