Lazy Image

Component 111

About

A lightweight lazy-loading image with a skeleton shimmer and smooth fade-in. Supports placeholders, in-view loading, and responsive aspect ratios out of the box.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Lazy Image to your project and fits it to your theme.

Code

How Lazy Image is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';
import React from 'react';
import { LazyImage } from '@/components/ui/lazy-image';
import { Button } from '@/components/ui/button';

export default function Demo() {
	const [instance, setInstance] = React.useState(0);
	return (
		<LazyImageDemo
			key={instance}
			onReload={() => setInstance((prev) => prev + 1)}
		/>
	);
}

function LazyImageDemo({ onReload }: { onReload: () => void }) {
	const [seed] = React.useState(() => Math.floor(Math.random() * 1000));

	const imageUrl = `https://picsum.photos/seed/${seed}/1280/720`;

	return (
		<div className="flex min-h-screen w-full flex-col items-center justify-center gap-4 p-4">
			<Button onClick={onReload}>Load Image</Button>
			<div className="mx-auto w-full max-w-4xl">
				<LazyImage
					alt="Random"
					src={imageUrl}
					ratio={16 / 9}
					fallback="https://cdn.21st.dev/assets/mirror/1b/1bf754ad4768408210bd1d41d50775b0bbc49c12618f08b13660e8df4b178091.svg"
				/>
			</div>
		</div>
	);
}