Boot loader

Getting Started guide for the WASM-free bootstrap loading overlay.

Covers document-shell wiring, the hydrate entrypoint, and static loading/error UI.

Guide page

Full Getting Started walkthrough with wiring snippets and static loading/error demos.

Boot loader

While the WASM bundle downloads and Leptos hydrates, show a static full-viewport overlay instead of an empty or half-styled page. The boot loader is SSR-safe: inline CSS, plain HTML, and Leptos components that do not require hydration.Wiring checklist
1. Add <OrbitalBootLoaderHeadAssets /> in <head> after <OrbitalFirstPaintHeadAssets />, before <HydrationScripts>.2. Add <OrbitalBootOverlay /> in <body> after your app root. The hydrated app must stay the first body child.3. Call orbital::hide_boot_loader() immediately after leptos::mount::hydrate_body(...) in every hydrate() export.
Document shellorbital_shell wires the head assets and overlay automatically. Custom shells match orbital-preview-app/src/routes.rs:
<OrbitalFirstPaintHeadAssets />
<OrbitalBootLoaderHeadAssets />
<HydrationScripts options />

<body>
    {app_fn()}
    <OrbitalBootOverlay theme_mode=ThemeMode::Dark />
</body>
Hydrate entrypointSet a panic hook that calls hide_boot_loader() so startup failures do not leave the overlay trapping the page. See orbital-preview-frontend/src/lib.rs:
std::panic::set_hook(Box::new(|info| {
    orbital::hide_boot_loader();
    console_error_panic_hook::hook(info);
}));

leptos::mount::hydrate_body(App);
orbital::hide_boot_loader();
Loading stateA modal dialog with an overall progress bar, elapsed time, per-step durations, and boot step checklist renders inside #orbital-boot-overlay until hydration completes. Completed steps show frozen durations on the right; the active step shows live elapsed time; pending steps show —. On success, the backdrop fades out and the modal card fades with a slight scale (motion-aligned exit); prefers-reduced-motion skips the animation.
Error stateIf JS or WASM fails to load, inline listeners set html[data-orbital-boot-state="error"] and reveal a static dialog surface with MessageBar — not the hydrated Dialog component (portal/focus trap).
Unable to load application
Startup failed
The application bundle could not be downloaded or started.
Refresh the page or try again later. If the problem persists, check your network connection.
Constraints
Keep the boot loader WASM-free — no LoadingBar, reactive ProgressBar, or full Dialog. Progress bar styling uses shared CSS tokens only; width is updated by inline JS.Place <OrbitalBootOverlay /> after the app root, not before it, to avoid hydration DOM mismatches.Post-hydration Rust panics are logged only unless you add custom handling; call hide_boot_loader() from your panic hook when WASM did start.