API and Development
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. |
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.
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.
| 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. |