Media skeletonsPro
Placeholders for generated media that hold the final shape from the first paint: an image as a coarse cell grid, video as a film strip, audio as a flat player and a 3D model as a wire cube.
On this page
ProImage cells, a video film strip, a flat audio player and a wire cube for 3D.
Installation
Usage
import { SkeletonMedia } from "@/components/ui/chatcn/pro/skeleton-media-set"
<SkeletonMedia kind="image" aspectRatio="3:4" />
<SkeletonMedia kind="video" />
<SkeletonMedia kind="audio" />
<SkeletonMedia kind="model" />Use them where history or a gallery loads, with the aspect ratio of the real item so nothing shifts when it arrives. While a model is generating, reach for a progress component instead: a skeleton says loading, not working.
Examples
Aspect ratios
ProPortrait, square, landscape and tall images, a 21:9 video and a 4:3 model.
Props
| Prop | Type | Notes |
|---|---|---|
kind | "image" | "video" | "audio" | "model" | Required |
aspectRatio | "W:H" | number | Default 1:1, video 16:9. Ignored for audio |
pulse | boolean | Slow opacity pulse. Default true |
delay | number | Fade in after this many ms so fast loads never flash. Default 200 |
seed | number | Varies the image cells |
label | string | Announced to screen readers |
Accessibility
- Each skeleton is a busy status with a label such as Loading image. The shapes are hidden from assistive tech.
- In forced colors the frame keeps a system outline.
Motion
- No shimmer: that is reserved for Thinking. A 2 s opacity pulse from 1 to 0.55, off under reduced motion.