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. Accessibility

Loading Boundary

Accessibility

Import LoadingBoundary from @prepared911/ui/loading-boundary.
  • Named, not just painted. The pending region holds a visually hidden label (loadingLabel) and the slot is inert, so the placeholder shapes are never read. The label is also written to the polite live region through useAnnounce, once, because an aria-busy region is not reliably read.
  • Busy. The region carries aria-busy="true" and data-loading while it is pending, as the Skeleton contract (SK-3) asks of the consumer region.
  • Inert placeholder. The loading slot is inert: not focusable, not clickable, not in the accessibility tree.
  • Delay. Nothing is announced and nothing is visible until delayMs passes, and a load that settles first is silent.
  • Errors. The error slot is an ErrorBoundary, which announces its own recovery assertively. See its accessibility notes.
  • Motion. The boundary animates only the optional fade after delayMs: an opacity change on the enter token, which reduced motion keeps because it explains the change. The default placeholder is Skeleton, whose pulse is static under reduced motion, increased contrast and forced colors.
  • Layout. No inline sizes; the placeholder reserves space with layout primitives, so the swap to the ready content does not shift the page.
Previous
Loading Boundary / API and Development
Next
Loading Indicator / Usage