Lazy Load Image (next/image)
A next/image wrapper that tracks idle/loading/loaded/error state, shows a spinner placeholder and fades the image in once it loads.
AutoPlayTabsLazyLoadImage wraps next/image (with fill) and manages load state for you: it shows a spinner while loading, an error message on failure, and fades the image in when ready. It accepts an aspectRatioClass so it can sit inside fixed-ratio containers (carousels, tab panels, cards). Pass an empty src to defer loading until the slide is in view.
Installation
npx shadcn@latest add @adv/auto-play-tabs-lazy-load-imageUsage
import { AutoPlayTabsLazyLoadImage } from '@/components/autoPlayTabs/AutoPlayTabsLazyLoadImage';
<AutoPlayTabsLazyLoadImage
src="/cover.jpg"
alt="Cover"
aspectRatioClass="aspect-video"
priority
/>Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image source; pass "" to defer loading. |
alt | string | — | Alt text. |
priority | boolean | false | Forwarded to next/image for above-the-fold images. |
aspectRatioClass | string | "aspect-4/3" | Tailwind aspect-ratio class on the container. |
spinnerSize | string | "w-10 h-10" | Size classes for the loading spinner. |
containerClassName | string | "" | Extra classes on the wrapper. |
imageClassName | string | "" | Extra classes on the image. |
initialStatus | "idle" | "loading" | "loaded" | "error" | "idle" | Seed the load state (e.g. for cached images). |
onLoadStatusChange | (status) => void | — | Notified when the load state changes. |
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.
Accordion Filter Group
A single animated accordion panel containing labelled checkboxes, used as a filter group inside a sidebar. Smooth open/close transitions driven by CSS and useLayoutEffect — no GSAP required.