RhombusKit

Skeleton

A skeleton is a placeholder that mimics the shape of content while it loads, reducing layout shift and perceived wait. RhombusKit's <rhombus-skeleton> is pure CSS — a --surface-2 block with an optional compositor-only shimmer — with no Material dependency and no new tokens.

Example

When to use

  • While fetching content whose layout is known — a profile card, a list row, a media thumbnail — so the page holds its shape and doesn't jump when data arrives.
  • For waits long enough to notice (roughly > 300ms) where showing the coming structure feels faster than a blank space or a lone spinner.

When not to use

  • For an indeterminate action with no known result shape (submitting a form, a background sync), use Progress — a spinner or bar.
  • When there is genuinely no data to load, use an Empty State, not a skeleton that will never resolve.

Related components

  • Progress — an indeterminate spinner/bar for a discrete wait.
  • Empty State — for the no-data case.
  • Avatar / Card — the real content a skeleton stands in for.

Was this page helpful?