68 lines
1.4 KiB
TypeScript
Executable File
68 lines
1.4 KiB
TypeScript
Executable File
import { useState, useEffect, ImgHTMLAttributes } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface OptimizedImageProps extends ImgHTMLAttributes<HTMLImageElement> {
|
|
src: string;
|
|
alt: string;
|
|
className?: string;
|
|
loadingClassName?: string;
|
|
}
|
|
|
|
export function OptimizedImage({
|
|
src,
|
|
alt,
|
|
className = '',
|
|
loadingClassName = 'animate-pulse bg-muted',
|
|
...props
|
|
}: OptimizedImageProps) {
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
const [error, setError] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Reset states when src changes
|
|
setIsLoaded(false);
|
|
setError(false);
|
|
|
|
const img = new Image();
|
|
img.src = src;
|
|
img.onload = () => setIsLoaded(true);
|
|
img.onerror = () => setError(true);
|
|
|
|
return () => {
|
|
img.onload = null;
|
|
img.onerror = null;
|
|
};
|
|
}, [src]);
|
|
|
|
if (error) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex items-center justify-center bg-muted text-muted-foreground',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<span>Image not found</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
className={cn(
|
|
className,
|
|
!isLoaded && loadingClassName,
|
|
'transition-opacity duration-300',
|
|
isLoaded ? 'opacity-100' : 'opacity-0'
|
|
)}
|
|
onLoad={() => setIsLoaded(true)}
|
|
onError={() => setError(true)}
|
|
loading="lazy"
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|