Skeleton
A quiet placeholder that reserves space while content loads.
import Skeleton from "swshd/Skeleton";Skeleton reserves space while content loads — compose its shapes to match the layout they replace. It does not fetch data or decide when loading ends.
The legacy src/components/Shimmer remains the app's gradient-based placeholder; this skeleton reads the active theme's fill roles and pulses without app palette dependencies.
Lines, an avatar circle, and a media block — one vocabulary for any loading layout.
The pulse fades to 0.5 opacity over 1000 ms and reverses, using motion.easing.inOut. Reduced motion, automation, or animated={false} keeps the shape static at full opacity.
import Skeleton from "swshd/Skeleton";
import { spacing } from "swshd/tokens";
<Skeleton width="65%" height={spacing.md} radius="xs" />Shapes are decorative: hidden from assistive technology and ignoring pointer events. The loading region should own its accessible busy state or loading announcement so a layout with several shapes is not announced repeatedly.
| Prop | Type | Default | Description |
|---|---|---|---|
width | DimensionValue | "100%" | Match the loaded content's width, in points or a percentage. |
height | DimensionValue | spacing.md | Match the loaded content's height. |
radius | RadiusToken | "sm" | Corner token. Equal dimensions with "full" form a circle. |
animated | boolean | true | Pulse while loading. Reduced motion and automation take precedence. |
style | StyleProp<ViewStyle> | — | Layout only: margins, alignment, flex, responsive constraints. |
testID | string | — | data-testid on web. |