Component Skeleton

Skeleton

Skeleton placeholders for loading states.

Skeletons are purely visual placeholders. They don't own loading logic; your view/state decides when to render skeletons vs real content.

When to use

• Loading lists and cards where final layout is known
• Placeholder lines for text blocks

Not a good fit:

• Indeterminate “work in progress” where you want an explicit spinner (use Spinner)

API

SkeletonLine

• skeleton_line(): constructor
• id(...): stable identity override
• width(px(...)): optional fixed width (default: w_full())
• height(px(...)): line height (default: 12px)
• tone(Hsla): override background tone

SkeletonBlock

• skeleton_block(): constructor
• id(...): stable identity override
• width(px(...)): optional fixed width (default: w_full())
• height(px(...)): block height (default: 80px)
• rounded(bool): rounded corners (default: true)
• tone(Hsla): override background tone

Defaults

• Skeletons pulse opacity in a loop.
• Background tone defaults to theme.surface.hover.

Notes

• Prefer skeletons when the final layout is known (better perceived performance than a spinner).
• In virtualized lists, render skeleton rows like normal rows (keep stable VirtualRow keys).

Example

use gpui::{div, px};
use yororen_ui::component::{skeleton_block, skeleton_line};

let view = div()
    .flex()
    .flex_col()
    .gap_2()
    .w(px(360.))
    .child(skeleton_line().height(px(12.)).width(px(220.)))
    .child(skeleton_line().height(px(12.)).width(px(320.)))
    .child(skeleton_block().height(px(72.)).rounded(true));