# Skeleton

Draws the layout of content that is loading, so the page appears at once and content replaces each shape in place.

* Kind: component
* Page: https://design.werklist.com/components/skeleton
* Version: 2.1.2

## When to use it

* A page or panel loads content of known shape
* The body of a message or the notes of an interview load after their frame
* A list loads its first page, such as a list of candidates

## When not to use it

* Toolbars, tabs and column headers: show them from the start
* Work of known size: Progress bar
* A wait inside a control: Spinner
* A skeleton and a spinner together

## Anatomy

* fill, light: the ink mixed 22 percent into the card: color-mix(in srgb, var(--text) 22%, var(--surface-1)) (--skeleton-fill)
* fill, dark: the ink mixed 16 percent into the card: color-mix(in srgb, var(--text) 16%, var(--surface-1)) (--skeleton-fill)
* text line: 12 px high for Dense and Body text (13 and 14 px); corner radius 4 px (--radius-sm)
* paragraph: lines at 80, 67 and 60 percent width, last shortest; 8 px apart (--space-2)
* avatar: circle at the avatar size (32 px in a list row)
* block: the size and corner radius of the component it stands for
* row: the height of the real row (58 px for a two line list row) and its gap before the lines
* count: as many rows as fill the visible area

## States

* loading: the whole skeleton pulses from 100 to 50 percent opacity and back over 2,000 ms, cubic-bezier(0.4, 0, 0.6, 1); all shapes in step
* partly loaded: arrived parts replace their shapes; the rest keep pulsing
* loaded: content replaces the shapes in place; the region is no longer busy
* empty: gives way to the empty state
* failed: gives way to the error and Try again, in place
* slow: after 10 seconds the skeleton stays and a neutral inline message above it says what is still loading
* reduced motion: no pulse

## Accessibility

* shapes are aria-hidden
* the loading region carries aria-busy true and one role status element with a visually hidden sentence naming what loads, announced once
* nothing in a skeleton is focusable; focus stays where it was when content arrives

## Content

* the hidden sentence names what loads: 'Loading candidates'

## Tokens

* --skeleton-fill
* --radius-sm
* --space-2