ViewLoader

ViewLoader renders a centered, branded WaveIndicator animation for loading states. It replaces bare Spinner {} usage in views and tab content areas, providing consistent centering and the branded wave animation.

Props

Prop	Type	Default	Description
compact	bool	false	Use compact mode for tab or section content areas instead of full-page views.

Default mode fills the available view space with a large wave animation (flex-1 h-full min-h-48, WaveIndicatorSize::Lg).

Compact mode adds vertical padding with a medium wave animation (py-12, WaveIndicatorSize::Md).

Usage

Full-page loading gate

Use the default mode when a routed view is waiting for its primary data:

use crate::ui::ViewLoader;

let data = use_resource(|| async move { fetch_items().await });

rsx! {
    ViewContainer {
        match data.read_unchecked().as_ref() {
            Some(Ok(items)) => rsx! {
                // Render items
            },
            Some(Err(e)) => rsx! {
                div { class: "text-destructive", "{e}" }
            },
            None => rsx! {
                ViewLoader {}
            },
        }
    }
}

Tab or section loading

Use compact mode inside tabbed interfaces or sections within a larger page:

match tab_data.read_unchecked().as_ref() {
    Some(Ok(data)) => rsx! {
        // Render tab content
    },
    None => rsx! {
        ViewLoader { compact: true }
    },
}

When to use ViewLoader vs Spinner

Scenario	Component
Page-level data loading	ViewLoader {}
Tab or section loading	ViewLoader { compact: true }
Button loading state	Spinner {}
Inline chat message loading	Spinner {}
Small inline indicators	Spinner {}

Use ViewLoader for any loading state that occupies a content region. Keep Spinner for inline or button-adjacent indicators.

WaveIndicator

ViewLoader wraps WaveIndicator, the branded animation component. WaveIndicator renders five vertical bars that pulse with staggered timing to create a wave effect.

Sizes

Variant	Bar width	Bar height	Use case
Sm	2px	8px	Inline status indicators
Md	3px	12px	Tab/section loading, chat typing
Lg	4px	20px	Full-page loading states

Direct usage

You rarely need WaveIndicator directly — ViewLoader handles the common cases. If you need custom layout around the animation:

use crate::ui::{WaveIndicator, WaveIndicatorSize};

rsx! {
    div { class: "my-custom-container",
        WaveIndicator { size: WaveIndicatorSize::Sm }
    }
}

Source files

• src/ui/view_loader_ui.rs — ViewLoader component
• src/ui/wave_indicator_ui.rs — WaveIndicator component and size enum
• tailwind.css — .assistant-wave-bar animation keyframes