Skeleton
Shape-matched placeholders that preserve layout while content loads.
Built on Workshop1 compositionUpstream API
Loading customer
Usage
import { Skeleton } from "@workshop1/ui/components/skeleton"Match the loaded content’s shape and approximate dimensions so the page does not jump when data arrives. A row should look like a row, an avatar like an avatar, and a card like the final card. Prefer a skeleton for page and collection loading; use a spinner for a bounded operation with no meaningful final shape.
The shimmer respects reduced-motion preferences. Avoid large collections of decorative placeholder bars that do not correspond to real content.
Accessibility
Mark the loading region with aria-busy="true" and include concise screen-reader text. Skeleton blocks themselves should remain unnamed and non-interactive.