lazy-image

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { useInView } from "motion/react";
5import React from "react";
6import { AspectRatio } from "@/components/ui/aspect-ratio";
7 
8type LazyImageProps = {
9	alt: string;
10	src: string;
11	className?: string;
12	containerClassName?: string;
13	/** URL of the fallback image. default: undefined */
14	fallback?: string;
15	/** The ratio of the image. */
16	ratio: number;
17	/** Whether the image should only load when it is in view. default: false */
18	inView?: boolean;
19};
20 
21export function LazyImage({
22	alt,
23	src,
24	ratio,
25	fallback,
26	inView = false,
27	className,
28	containerClassName,
29}: LazyImageProps) {
30	const ref = React.useRef<HTMLDivElement | null>(null);
31	const imgRef = React.useRef<HTMLImageElement | null>(null);
32	const isInView = useInView(ref, { once: true });
33 
34	const [imgSrc, setImgSrc] = React.useState<string | undefined>(
35		inView ? undefined : src
36	);
37	const [isLoading, setIsLoading] = React.useState(true);
38 
39	const handleError = () => {
40		if (fallback) {
41			setImgSrc(fallback);
42		}
43		setIsLoading(false);
44	};
45 
46	const handleLoad = React.useCallback(() => {
47		setIsLoading(false);
48	}, []);
49 
50	// Load image only when inView
51	React.useEffect(() => {
52		if (inView && isInView && !imgSrc) {
53			setImgSrc(src);
54		}
55	}, [inView, isInView, src, imgSrc]);
56 
57	// Handle cached images instantly
58	React.useEffect(() => {
59		if (imgRef.current?.complete) {
60			handleLoad();
61		}
62	}, [handleLoad]);
63 
64	return (
65		<AspectRatio
66			className={cn(
67				"relative size-full overflow-hidden border bg-accent/30",
68				containerClassName
69			)}
70			ratio={ratio}
71			ref={ref}
72		>
73			{imgSrc && (
74				// biome-ignore lint/correctness/useImageSize: dynamic image size
75				<img
76					alt={alt}
77					className={cn(
78						"size-full object-cover transition-opacity duration-500",
79						isLoading ? "opacity-0" : "opacity-100",
80						className
81					)}
82					decoding="async"
83					fetchPriority={inView ? "high" : "low"}
84					loading="lazy"
85					onError={handleError}
86					onLoad={handleLoad}
87					ref={imgRef}
88					role="presentation" // Changed from "img" to "presentation" since it's decorative
89					src={imgSrc}
90				/>
91			)}
92		</AspectRatio>
93	);
94}