Household pattern
SurfaceState
Shared page loading, recovery, and empty feedback.
States
Loading
Getting the board ready
Opening your page…
Error and retry
Empty
Nothing here yet
There’s nothing to show in this stretch.
When to use
- At a route loading or error boundary.
- When a page has no content to show.
When not to
- For household outcomes, asks, or receipts. Those come from the engine.
Props
| Name | Type | Notes |
|---|---|---|
| state* | "loading" | "error" | "empty" | Page availability only. |
| onRetry | () => void | Pass the route error boundary’s retry callback. |
| className | string | Additional layout classes. |
* required
Accessibility invariants
- WorkingIndicator announces availability politely.
- Retry and home are native keyboard actions.
- Reduced motion disables the loading dot’s animation.
- Never display internal error details.
Agent instructions
For anything generating UI from this system
Reuse the root loading and error boundaries for gallery, editor, replay, and system routes. Do not invent delays or failure flags in product routes. The live examples render the actual loading fallback and exercise an error boundary using the actual recovery fallback.