StateView builder

A region that picks the truthful waiting, empty, failed, or ready surface.

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

The verified state-ladder scene in studio-dark

use gpui_kit::display::state_view::StateView;

Reviewed in state-ladder.

Construct

new(ident: impl Into<Ident>, phase: impl HasPhase) -> Self
from_async<T, E: AsRef<str>>(ident: impl Into<Ident>, value: &AsyncValue<T, E>, ready: impl FnOnce(&T) -> AnyElement) -> Self

Options

Chain onto the value.

content(content: impl IntoElement) -> Self
elapsed(elapsed: Duration) -> Self

Example · state-ladder

fn state_ladder(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    let pane = |title: &'static str, view: StateView| {
        div()
            .column()
            .gap_token(&theme, Space::Xs)
            .w(px(240.0))
            .child(crate::foundation::text(&theme, TypeScale::Caption, title))
            .child(view)
    };
    stack(&theme)
        .w_full()
        .child(caption(
            &theme,
            "Ten phases, one surface. A refusal is not an empty list.",
        ))
        .child(
            row(&theme)
                .child(pane(
                    "Idle",
                    StateView::new("scene.state.idle", Phase::Idle),
                ))
                .child(pane(
                    "Queued",
                    StateView::new("scene.state.queued", Phase::Queued),
                ))
                .child(pane(
                    "Blocked",
                    StateView::new("scene.state.blocked", Phase::Blocked),
                )),
        )
        .child(
            row(&theme)
                .child(pane(
                    "Loading",
                    StateView::new("scene.state.loading", Phase::Loading),
                ))
                .child(pane(
                    "Empty",
                    StateView::new("scene.state.empty", Phase::Empty),
                ))
                .child(pane(
                    "Cancelled",
                    StateView::new("scene.state.cancelled", Phase::Cancelled).content(div()),
                )),
        )
        .child(
            row(&theme)
                .child(pane(
                    "Unavailable",
                    StateView::new(
                        "scene.state.unavailable",
                        Loadable::<(), String>::Unavailable("the host refused".into()),
                    ),
                ))
                .child(pane(
                    "Error",
                    StateView::new(
                        "scene.state.error",
                        AsyncValue::<(), String>::error("the index is still building".into()),
                    ),
                ))
                .child(pane(
                    "Ready",
                    StateView::from_async(
                        "scene.state.ready",
                        &AsyncValue::<_, String>::ready("12 runs"),
                        |value| {
                            crate::foundation::text(&theme, TypeScale::Body, *value)
                                .into_any_element()
                        },
                    ),
                )),
        )
        .child(pane("Refreshing, last value kept", {
            let mut value = AsyncValue::<_, String>::ready("12 runs");
            value.refresh();
            StateView::from_async("scene.state.refreshing", &value, |text| {
                crate::foundation::text(&theme, TypeScale::Body, *text).into_any_element()
            })
        }))
        .child(
            StaleMark::new(
                "scene.state.stale",
                "Refreshing failed. The last verified value remains.",
            )
            .updated("a moment ago"),
        )
        .into_any_element()
}

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