Skip to content

Component Skeleton

MeowLynxSea edited this page Jun 18, 2026 · 3 revisions

Skeleton

A loading placeholder. Renders a soft block in the same shape as the content it stands in for.

use yororen_ui::headless::skeleton::skeleton;

skeleton("avatar-placeholder", cx).block(true).render(cx)
skeleton("line", cx).render(cx)              // soft rounded line (default)
skeleton("sharp", cx).block_sharp(true).render(cx)

Props

Method Purpose
block(v) Render as a full-width block.
block_sharp(v) Like block but with sharp corners.
rounded(v) Render with a soft rounded shape (default for the non-block variant).

Factory takes (id, _cx). The id is required so the renderer can keep the shimmer animation's keyed state. .render(cx) returns Div (not Stateful<Div>) — the skeleton does not need a focusable id.

See also: ProgressBar, EmptyState.

Clone this wiki locally