import { memo } from 'react' import clsx from 'clsx' import Image, { ImageProps } from 'next/image' import { useOnImageLoad } from 'hooks' const FadeImage = ({ className, id, ...props }: ImageProps) => { const [loaded, onLoad] = useOnImageLoad() return ( <Image className={clsx('transition-opacity', !loaded && 'opacity-0', className)} id={id} {...props} onLoad={onLoad} /> ) } export default memo(FadeImage)