Skeleton

import { ListRow, Skeleton } from "@arcadia/ui";

<div {...sx("cmp-stream", cmp.stream)} aria-busy="true">
  <div {...sx("cmp-prose", cmp.prose)}>
    <Skeleton width="64%" />
    <Skeleton width="88%" />
    <Skeleton width="40%" />
  </div>
  <div {...sx("cmp-rows", cmp.rows)}>
    <ListRow
      interactive={false}
      leading={<Skeleton shape="circle" width="var(--space-4)" />}
      label={<Skeleton width="48%" />}
    />
    <ListRow
      interactive={false}
      leading={<Skeleton shape="circle" width="var(--space-4)" />}
      label={<Skeleton width="62%" />}
    />
  </div>
</div>

TSX

import { Skeleton } from "@arcadia/ui";

<Skeleton width="72%" />

text, the default, is one line of the surrounding text: 1lh tall with a 6px bar centred in it, so a stack keeps the prose pitch and a skeleton label keeps a row's height. Nothing moves when the content arrives. It pulses 1 → .45 → 1 over 1.4s.

Which loader? A Skeleton holds the place of content that is on its way. A Spinner says a control or a small region is busy. A Pine Sweep says an agent is running, and a Shimmer marks the live status text beside it.

Examples

Shapes

block for images and cards (40px tall by default), circle for avatars and icons.

import { Skeleton } from "@arcadia/ui";

<Skeleton shape="circle" />
<Skeleton shape="block" width="var(--space-16)" />
<Skeleton shape="block" width="calc(var(--space-16) * 2)" height="var(--space-6)" />

width and height size one placeholder: a share of its container or a size token. rootStyle takes layout and these knobs.

--skeleton-w: SkeletonLengthDefault 100%; Width (a circle's diameter).
--skeleton-h: SkeletonLengthDefault var(--space-10); A block's height.
--skeleton-fill: PaintDefault var(--fill-4); The bar, block or circle.

Always decorative (aria-hidden): announce loading on the container with aria-busy, as above, or with text. With reduced motion it holds still at its resting tint.

shape: "text" | "block" | "circle"Default "text"; text: one line of the surrounding text (1lh tall) with a 6px bar centred in it, so a skeleton label keeps a row's height and a stack of them keeps the prose pitch. block: a filled rectangle (images, cards). circle: an avatar or icon placeholder.
width: SkeletonLengthDefault 100%; Width, e.g. "72%" or "var(--space-16)". Circle: 24px.
height: SkeletonLengthDefault 40px; Height for block.
rootStyle: RootStyle<SkeletonKnobs>; Typed StyleX override: layout and the --skeleton-* knobs.

Rest props go to <span> props and render.

Usage

Examples

Shapes

Customising

Accessibility

API reference

Skeleton