PulseLoader builder

A row of breathing dots, used while a request is in flight.

A builder is RenderOnce. Construct and mount it in one expression.

The verified loading scene in studio-dark

use gpui_kit::display::loading::PulseLoader;

Reviewed in loading.

Construct

new(ident: impl Into<Ident>) -> Self

Options

Chain onto the value.

label(label: impl Into<SharedString>) -> Self
tint(tint: impl Into<Hsla>) -> Self

Example · loading

fn loading(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    let indicator = |title: &'static str, loader: AnyElement| {
        div()
            .column()
            .items_center()
            .justify_center()
            .gap_token(&theme, Space::Md)
            .w(px(220.0))
            .h(px(112.0))
            .p_token(&theme, Space::Md)
            .radius(&theme, Radius::Card)
            .surface(&theme, gpui_kit_theme::Surface::Panel)
            .child(crate::foundation::text(&theme, TypeScale::Label, title))
            .child(loader)
    };
    stack(&theme)
        .w_full()
        .max_w(px(520.0))
        .child(
            row(&theme)
                .gap_token(&theme, Space::Md)
                .child(indicator(
                    "Loading providers",
                    PulseLoader::new("scene.loading.pulse")
                        .label("Loading providers")
                        .into_any_element(),
                ))
                .child(indicator(
                    "Inline wait",
                    Spinner::new("scene.loading.inline")
                        .label("Inline wait")
                        .into_any_element(),
                )),
        )
        .child(
            row(&theme)
                .gap_token(&theme, Space::Md)
                .child(indicator(
                    "Region filling in",
                    BarLoader::new("scene.loading.bar")
                        .label("Region filling in")
                        .into_any_element(),
                ))
                .child(indicator(
                    "Refreshing in place",
                    RefreshVeil::new(
                        "scene.loading.veil",
                        crate::foundation::text(&theme, TypeScale::Body, "Last verified list"),
                    )
                    .label("Refreshing")
                    .into_any_element(),
                )),
        )
        .child(
            div()
                .column()
                .gap_token(&theme, Space::Sm)
                .w_full()
                .child(crate::foundation::text(
                    &theme,
                    TypeScale::Label,
                    "List tails",
                ))
                .child(LoadMore::new("scene.loading.more-idle").on_more(|_, _| {}))
                .child(LoadMore::new("scene.loading.more-loading").state(LoadMoreState::Loading))
                .child(LoadMore::new("scene.loading.more-end").state(LoadMoreState::Exhausted)),
        )
        .child(
            div()
                .column()
                .gap_token(&theme, Space::Sm)
                .w_full()
                .child(crate::foundation::text(
                    &theme,
                    TypeScale::Label,
                    "Loading list",
                ))
                .child(
                    Skeleton::new("scene.loading.skeleton")
                        .rows(3)
                        .label("Loading list"),
                ),
        )
        .child(
            div()
                .column()
                .gap_token(&theme, Space::Sm)
                .w_full()
                .child(crate::foundation::text(
                    &theme,
                    TypeScale::Label,
                    "Card and paragraph placeholders",
                ))
                .child(
                    Skeleton::new("scene.loading.shapes")
                        .shapes([
                            SkeletonShape::Card,
                            SkeletonShape::Paragraph { lines: 3 },
                            SkeletonShape::Circle { size: 28.0 },
                        ])
                        .label("Loading card"),
                ),
        )
        .into_any_element()
}

Source: crates/gpui-kit/src/display/loading.rs