GalleryImage

Gallery image that handles variant changes with crossfade. Shows old image + shimmer while new image loads, then crossfades. Framework-agnostic: uses a render prop to let you provide any image component.

Usage

import { GalleryImage, ImageSkeleton, LoadingImage } from "@desk/ui/components/gallery";

Best practices

In Next.js pass a children render prop wrapping next/image and thread its src+className through — the default renderer is a plain <img> that skips Next optimization.
When you omit children, alt is required (a dev warning fires otherwise); pass alt="" to mark the image decorative. alt is ignored once a render prop supplies its own image.
Drive variant switches by changing src — that triggers the built-in crossfade + shimmer; don't unmount/remount GalleryImage per variant or you lose the transition.
Position GalleryImage inside a relative container with fixed dimensions — the surfaces are absolute inset-0, so an unsized parent collapses to zero height.

Props

GalleryImage

Prop	Type	Description
alt	`string`	Alt text for the built-in `<img>` renderer used when `children` is omitted. Required in that mode (a dev-only warning fires otherwise); pass `""` to mark the image decorative. Ignored when `children` is provided.
children	`(props: ImageRenderProps) => ReactNode`	Render function that receives props to spread onto your image component. Must pass `src` and `className` to the rendered image surface. When omitted, GalleryImage renders a plain `<img>` (see `alt`).
className	`string`	Additional className for the image
src(required)	`string`	Current image source URL; changing it triggers the crossfade transition.

ImageSkeleton

Prop	Type	Default	Description
className	`string`

LoadingImage

Prop	Type	Default	Description
children(required)	`ReactElement<{ onLoad?: () => void; className?: string; }, string \| import("react").JSXElementConstructor<any>>`		The image element to render (e.g., next/image, native img)
className	`string`		Additional className for the image