Skeleton | Arcadia Design

Skip to content

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.

Knob	Takes	Default	Sets
	`SkeletonLength`	`100%`	Width (a circle's diameter).
	`SkeletonLength`	`var(--space-10)`	A `block`'s height.
	`Paint`	`var(--fill-4)`	The bar, block or circle.