Skeleton
A placeholder shimmer shown while content loads.
1use herogpui::components::skeleton::Skeleton;Usage
1use herogpui::prelude::Skeleton;
2use gpui::prelude::*;
3use gpui::px;
4
5gpui::div()
6 .w(px(250.))
7 .flex()
8 .flex_col()
9 .gap(px(20.))
10 .child(Skeleton::new().w(px(218.)).h(px(128.)))
11 .child(
12 gpui::div()
13 .flex()
14 .flex_col()
15 .gap(px(12.))
16 .child(Skeleton::new().w(px(130.)).h(px(12.)))
17 .child(Skeleton::new().w(px(174.)).h(px(12.)))
18 .child(Skeleton::new().w(px(87.)).h(px(12.))),
19 )Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.
Anatomy
Rust types
Skeleton
Skeleton is assembled from these builders. The API reference lists each one.
Customization
Appearance builders and theme tokens Skeleton uses.
Styling
| Style | Description |
|---|---|
surface_tertiary + hairline_radius + overflow_hidden | Theme secondary-surface placeholder clipped to the shared hairline radius. |
SkeletonAnimation::Shimmer + 1400ms repeated animation | A translucent background-colored band sweeps left to right. |
SkeletonAnimation::Pulse + 1600ms repeated animation | Opacity oscillates while motion is enabled. |
API reference
Builders
| Builder | Type | Default | Description |
|---|---|---|---|
animation_type( | SkeletonAnimation | SkeletonAnimation:: | Selects shimmer, pulse, or no animation; theme token supplies the default. |
Parts
| Part | Description |
|---|---|
Skeleton | Clipped placeholder surface with optional hidden layout content. |
States
| Builder | State | Description |
|---|---|---|
SkeletonAnimation::Shimmer | Shimmer | A highlight band sweeps across the placeholder. |
SkeletonAnimation::Pulse | Pulse | The placeholder opacity pulses. |
SkeletonAnimation::None / reduce_motion | No animation | A static placeholder is rendered, including when reduced motion is requested. |