Scenes

loading

Builds GradientSpinner PulseLoader Skeleton

The code that drew it

A still frame holds a repeating animation at its first frame and a one-shot at its last, because a still of a moving thing is not reproducible. Run the gallery to review motion.

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(
                    "Contacting host",
                    GradientSpinner::new("scene.loading.spinner")
                        .label("Contacting host")
                        .into_any_element(),
                )),
        )
        .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"),
                ),
        )
        .into_any_element()
}