Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. Loading Boundary
  3. Usage

Loading Boundary

Usage

Use LoadingBoundary around a region that can suspend: a lazy chunk, a remote, or data read with use. It swaps the region between three slots.
The three slots
  • Ready. The children. They may suspend; while they do the loading slot shows.
  • Loading. The loading prop. Reserve the space the ready content will take with layout primitives and Skeleton, so the swap does not move the page. Never size it with style. It is inert and hidden from assistive technology, so it must not hold controls. When omitted it is three Skeleton text lines.
  • Error. The error prop takes ErrorBoundary props and wraps the region in an ErrorBoundary. Its copy, retry and reset are the ErrorBoundary's; nothing is repeated here. Pass fallback with an announcement for a recovery node of your own. Omit error and a throw reaches the nearest outer boundary.
A retry remounts the region, so it can suspend again; the loading slot shows again until it settles.
The label
loadingLabel is required. It names the busy region and is announced politely once when the loading slot shows. A skeleton or spinner alone is never the name.
Delay
delayMs (default 0) holds the loading slot at opacity 0, keeping its space, and says nothing until the delay passes, then fades it in. A load that finishes inside the delay never flashes and is never announced. Use a delay such as 200 to 400 ms for regions that usually load fast.
Not this component
LoadingIndicator is the visible indicator and Skeleton is the placeholder shape; this boundary is neither. ErrorBoundary is the error recovery. A LoadingIndicator in the loading slot is decorative: the slot is inert and hidden from assistive technology, and the boundary names and announces the wait with loadingLabel, so the indicator adds no second status.
Previous
Loader / Accessibility
Next
Loading Boundary / API and Development
On this page
The three slots
The label
Delay
Not this component