Placeholder for content that is loading. Mirrors the shape of the final content so the layout doesn't shift when data arrives.
Text line
Card
Avatar + meta
tsx · view.tsx
import { Skeleton } from '@petanque-life/shared';
<Skeleton variant="text" lines={2} />
<Skeleton variant="avatar" size="md" />
<Skeleton variant="rect" height={120} />API
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "text" | "rect" | "avatar" | "circle" | "rect" | Shape of the placeholder. |
| lines | number | 1 | For <code>variant="text"</code> — number of lines. |
| width | string | number | "100%" | Explicit width. |
| height | string | number | variant-driven | Explicit height. |