Skeleton

Loading is the final layout in --surface-2 blocks at their real sizes, pulsing in opacity — never a spinner. Lay skeletons out exactly where the text, figures and rows will land, so nothing jumps when the data arrives.

import { Skeleton } from "@puckoops/camelot";

Name	Description	Default	Control
width	Any CSS width CSSProperties["width"]	-
height	Match the line height it stands in for CSSProperties["height"]	14
radius	A token such as var(--radius-full) string	-
className	string	-
style	CSSProperties	-	-

When to use

Use Skeleton for loading, laid out like the final content. Never a spinner inside a table.

Examples

Paragraph

Ragged widths read as text; equal widths read as a table.

Figure Card Loading

A FigureCard while it loads: label, figure, caption and bars at their real sizes.

Table Rows

Rows keep the header and the row height, so the table does not jump.

Item	Client	Amount

Avatar

A person row: a round block where the avatar goes.

All Variants

A band of cards loading on a 5 + 4 + 3 row.