Components / Feedback and display

Skeleton

A placeholder in the shape of content that is still loading: lines of text, a block or an avatar circle. It holds the space the content will take, so the layout does not jump when it arrives.

Source Edit this page

Hidden from assistive technology

When to use

Content with a known shape is loading: a list, a card, a profile, a table of results.

Use something else when:

the wait is inside a button: the Button's loading state
a small inline busy indicator is enough: LoadingDots
the task has a measurable amount: ProgressBar

Usage

tsx

import { Skeleton } from "@arshad-shah/cynosure";

<section aria-label="Profile" aria-busy={loading}>
  {loading ? <Skeleton lines={3} /> : <Profile user={user} />}
</section>

Replaced when loaded

Shapes

text draws lines lines the height of text at size; the last of several is shorter. block draws a box (one line tall unless you pass height), and circle an avatar (two lines across unless you pass height). width and height take any CSS length.

Props

Every prop of Skeleton
Prop	What it does	Type	Default
`shape`	`text`: lines the height of text at `size`. `block`: a box. `circle`: an avatar or icon.	`"circle" \| "text" \| "block"`
`lines`	Text shape only: how many lines. The last of several is shorter, like a paragraph.	`number`
`size`	Text size the lines stand in for (shared vocabulary: docs/conventions.md).	`Size`
`width`	Any CSS length. Default: the full width (text, block) or the height (circle).	`string`	`the full width (text`
`height`	Any CSS length. Default: one line of text (block) or the circle's diameter (circle).	`string`
`className`	Added to the root element, for layout.	`string`
`style`	Layout only. Restyle through --cy-skeleton-* tokens.	`CSSProperties`

Generated from the type definitions in @arshad-shah/cynosure 0.5.0.

Behaviour and accessibility

Hidden: the skeleton is aria-hidden and has no text or focus stops. Put aria-busy="true" on the region that owns it while it loads, and say in the page if loading fails.
No layout shift: a text skeleton is exactly as tall as the text it stands in for at the same size.
Motion: a highlight sweeps along the reading direction (right to left in right-to-left text). It stops under reduced motion, and in a theme made with createTheme({ motion: "reduced" }).
Forced colours: the bones draw in the system's grey text colour.
Touch: nothing to touch; pointer events pass through.

Theming

Tokens: --cy-skeleton-color, --cy-skeleton-highlight and --cy-skeleton-radius.

createTheme({ components: { skeleton: { radius: "2px" } } });

LoadingDots · ProgressBar · EmptyState

These examples run Cynosure 0.5.0 (commit 50ce30b), the version on npm.

When to useLink to "When to use"

UsageLink to "Usage"

ShapesLink to "Shapes"

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

ThemingLink to "Theming"