Import LoadingBoundary from @prepared911/ui/loading-boundary.
See LoadingBoundaryProps in props.ts and LoadingBoundaryErrorSlot in models.ts.
Prop
Type
Notes
children
ReactNode
The ready slot. May suspend.
loadingLabel
LocalizedMessage
Required. Names the busy region; announced politely.
loading
ReactNode
The loading slot. Defaults to three Skeleton lines. Inert.
error
LoadingBoundaryErrorSlot
Every ErrorBoundary prop except children. Omit for no boundary.
delayMs
number
Defaults to 0.
State attributes
The pending region has aria-busy="true" and data-loading. Until delayMs passes it also has data-starting-style, which holds it at opacity 0. No new state key was added.
Server rendering
index.tsx is hook-free, so a server component can render LoadingBoundary. It imports two client modules: ErrorBoundary and the pending region, which calls useAnnounce and keeps the delay timer. The pending region renders on the server with delayMs 0 visible and delayMs above 0 at starting style, matching the first client render, so hydration agrees. The label is announced after hydration.
Props
Name
Type
Default
Description
loadingLabel
LocalizedMessage
—
Accessible name of the pending state. It names the busy region for assistive technology and is announced politely
when the loading slot shows. A skeleton or a spinner alone is never the name.
children
ReactNode
—
The ready slot: the region, which may suspend. It replaces the loading slot once nothing in it is pending.
delayMs
number
—
Milliseconds to wait before the loading slot paints and the label is announced, so a load that finishes quickly
never flashes a placeholder. The slot still holds its space meanwhile. Defaults to 0, which paints at once.
error
LoadingBoundaryErrorSlot
—
The error slot: props for the ErrorBoundary that wraps the region, so a throw while loading or rendering shows
its recovery. Omit it and an error propagates to the nearest outer boundary.
loading
ReactNode
—
The loading slot: what the region shows while it is pending. Reserve the space the ready content will take with
layout primitives and Skeleton; do not set widths with style. It is inert and hidden from assistive
technology, so it must not hold controls. Defaults to three Skeleton text lines.
Storybook
Interactive examples and edge cases for this component are in Storybook.