LayoutLoading

Full-screen loading state for the initial render of a route.

Standalone

LayoutLoading on its own — use as a Suspense fallback or as the rendered output while a route's primary data is loading.

import { LayoutLoading } from "@appboxo/ui-kit"

export function LayoutLoadingStandalonePreview() {
  return (
    <div
      style={{
        background: "var(--fill-white)",
        minHeight: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <LayoutLoading />
    </div>
  )
}

Inside a Layout

Most commonly mounted via Layout's loadingNode slot. Pair with screenState={{ isLoading: true }} so the layout knows to hide content + nav transitions.

import { Layout, LayoutLoading } from "@appboxo/ui-kit"

export function LayoutLoadingDefaultPreview() {
  return (
    <Layout
      navBar={{ title: "Loading…" }}
      screenState={{ isLoading: true }}
      loadingNode={<LayoutLoading />}
    >
      <div />
    </Layout>
  )
}

Installation

pnpm add @appboxo/ui-kit

Footer Button

On This Page

Standalone Inside a Layout Installation

Build mini-apps with Boxo

Freedom UI Kit is the design system behind partner mini-apps shipping on the Boxo platform.