Skip to content

Skeleton

A placeholder the size of the content that is loading. Prefer it to a spinner for lists and cards.

FeedbackServer-rendered

Examples

Shapes

Example
<Skeleton width="70%" />
<Skeleton shape="block" width="160px" />
<Skeleton shape="circle" />

Loading server rows

Match the real row: the same height, a lamp-sized circle, lines 60–85% wide.

Example
<Card aria-busy="true" aria-label="Loading servers">
  {rows.map((width) => (
    <div class="server-row">
      <Stack gap="2">
        <Skeleton width={width} />
        <Skeleton width="30%" height="8px" />
      </Stack>
      <Skeleton shape="circle" width="8px" height="8px" />
    </div>
  ))}
</Card>

Usage

Usage
import { Skeleton } from '@switchboard/ui'

<Skeleton width="60%" />

Props

Every component also takes mix, for css() and mixins applied after its own style.

Skeleton

Skeleton props
PropTypeDefaultDescription
shape'line' | 'block' | 'circle''line'line: 10px text line. block: 32px box. circle: 24px.
widthstring–CSS length. Lines default to 100%.
heightstring–CSS length.

Also accepts every <span> attribute.

Accessibility

  • Each skeleton is aria-hidden. Mark the container aria-busy="true" and give it a name such as "Loading servers".
  • The shimmer stops under prefers-reduced-motion.

Guidance

Do

  • Match the size and count of what is loading.
  • Swap it out in one go when the data arrives.

Don’t

  • Use skeletons for loads under about 300ms; they flash.
  • Leave skeletons up when loading fails; show a Callout.