Lazy Load Image
A carousel slide that lazily swaps in its image only when in view, with a spinner placeholder, hover overlay and category badge.
LazyLoadImage is the slide renderer used inside the media carousel. While inView is false it shows a tiny placeholder; once in view it loads the real image and fades it in over a spinner, with a hover gradient and a category badge. It uses Embla-style flex-basis classes so it slots directly into a carousel track.
Installation
npx shadcn@latest add @adv/lazy-load-imageUsage
import { LazyLoadImage } from '@/components/mediaCarousel/lazy-load-image';
<div className="flex overflow-hidden">
<LazyLoadImage
item={{ id: 1, title: 'Cover', description: '', image: '/cover.jpg', category: 'Design' }}
inView
index={0}
isSelected={false}
onClick={() => openViewer(0)}
/>
</div>Example
Photography
Props
| Prop | Type | Default | Description |
|---|---|---|---|
item | CarouselItem | — | Slide data: { id, title, description, image, category }. |
inView | boolean | — | When true, the real image is requested and loaded. |
index | number | — | Slide index within the carousel. |
isSelected | boolean | — | Highlights the slide with a border when selected. |
onClick | () => void | — | Click handler, typically opens the media viewer. |