Skeleton — HeroGPUI

Skeleton on docs.rs Source at v0.14.0

Usage

Showing Usage, live: HeroGPUI compiled to WebAssembly. The canvas has no accessibility tree; each example's description and code below carry the same information.

Usage

An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27use herogpui::prelude::Skeleton;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![gpui::div()
        .w(px(250.))
        .flex()
        .flex_col()
        .gap(px(20.))
        .child(Skeleton::new().w(px(218.)).h(px(128.)).radius(px(8.)))
        .child(
            gpui::div()
                .flex()
                .flex_col()
                .gap(px(12.))
                .child(Skeleton::new().w(px(130.)).h(px(12.)))
                .child(Skeleton::new().w(px(174.)).h(px(12.)))
                .child(Skeleton::new().w(px(87.)).h(px(12.))),
        )
        .into_any_element()])

Expand code

Text Content

An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22use herogpui::prelude::Skeleton;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![gpui::div()
        .w(px(420.))
        .flex()
        .flex_col()
        .gap(px(12.))
        .children(
            [1.0_f32, 0.83, 0.66, 1.0, 0.5]
                .into_iter()
                .map(|f| Skeleton::new().w(px(420. * f)).h(px(16.))),
        )
        .into_any_element()])

Expand code

User Profile

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33use herogpui::prelude::Skeleton;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![gpui::div()
        .flex()
        .items_center()
        .gap(px(12.))
        // v3 rounds this one with `rounded-full`. A clipping
        // wrapper does not round it on vanilla GPUI (the clip
        // is rectangular), so the skeleton carries the radius
        // itself: half its size is `rounded-full`.
        .child(
            gpui::div()
                .flex_shrink_0()
                .child(Skeleton::new().w(px(40.)).h(px(40.)).radius(px(20.))),
        )
        .child(
            gpui::div()
                .flex()
                .flex_col()
                .gap(px(8.))
                .child(Skeleton::new().w(px(144.)).h(px(12.)))
                .child(Skeleton::new().w(px(96.)).h(px(12.))),
        )
        .into_any_element()])

Expand code

List Items

An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27use herogpui::prelude::Skeleton;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children((0..3)
        .map(|_| {
            gpui::div()
                .flex()
                .items_center()
                .gap(px(12.))
                .child(Skeleton::new().w(px(40.)).h(px(40.)))
                .child(
                    gpui::div()
                        .flex()
                        .flex_col()
                        .gap(px(8.))
                        .child(Skeleton::new().w(px(320.)).h(px(12.)))
                        .child(Skeleton::new().w(px(256.)).h(px(12.))),
                )
        }))

Expand code

Grid

An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17use herogpui::prelude::Skeleton;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![gpui::div()
        .flex()
        .flex_wrap()
        .gap(px(16.))
        .children((0..6).map(|_| Skeleton::new().w(px(130.)).h(px(96.))))
        .into_any_element()])

Single Shimmer

One shimmer runs across a whole group: the animation sits on the parent and is turned off on each child. An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29use herogpui::prelude::Skeleton;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        Skeleton::new()
            .w(px(422.))
            .h(px(96.))
            .animation_type(herogpui::theme::SkeletonAnimation::Shimmer)
            .child(
                gpui::div()
                    .flex()
                    .gap(px(16.))
                    .children((0..3).map(|_| {
                        Skeleton::new()
                            .w(px(130.))
                            .h(px(96.))
                            .animation_type(herogpui::theme::SkeletonAnimation::None)
                    })),
            )
            .into_any_element(),
    ])

Expand code

Animation Types

An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28use herogpui::prelude::Skeleton;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        Skeleton::new()
            .w(px(160.))
            .h(px(80.))
            .animation_type(herogpui::theme::SkeletonAnimation::Shimmer)
            .into_any_element(),
        Skeleton::new()
            .w(px(160.))
            .h(px(80.))
            .animation_type(herogpui::theme::SkeletonAnimation::Pulse)
            .into_any_element(),
        Skeleton::new()
            .w(px(160.))
            .h(px(80.))
            .animation_type(herogpui::theme::SkeletonAnimation::None)
            .into_any_element(),
    ])

Expand code

Loading

An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16use herogpui::prelude::Skeleton;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        Skeleton::new().w(px(320.)).h(px(16.)).into_any_element(),
        Skeleton::new().w(px(260.)).h(px(16.)).into_any_element(),
        Skeleton::new().w(px(180.)).h(px(16.)).into_any_element(),
    ])

Anatomy

Rust types

Skeleton

Skeleton is assembled from these builders. The API reference lists each one.

API reference

Against HeroUI v3.2.6: 5 entries ported, 0 partial, 1 not ported. Partial rows are marked in the tables; entries not ported are listed under each table with the reason.

Builders

Skeleton builders
Builder	Values	Default	Description
`animation_type(SkeletonAnimation)`	`SkeletonAnimation::Shimmer \| SkeletonAnimation::Pulse \| SkeletonAnimation::None`	`SkeletonAnimation::Theme`	Selects shimmer, pulse, or no animation; theme token supplies the default.

Not ported1 HeroUI entry not ported

Skeleton builders not ported
HeroUI v3	Why it is not ported
`Skeleton.className`	Browser styles are unavailable.

Parts

Skeleton parts
Part	Description
`Skeleton`	Clipped placeholder surface with optional hidden layout content.

States

Skeleton states
State	Builder	Description
`Shimmer`	`SkeletonAnimation::Shimmer`	A highlight band sweeps across the placeholder.
`Pulse`	`SkeletonAnimation::Pulse`	The placeholder opacity pulses.
`No animation`	`SkeletonAnimation::None`	A static placeholder is rendered, including when reduced motion is requested.

Alert Meter Progress Bar Progress Circle Spinner

Usage

Anatomy

API reference

Builders

Parts

States

Related components