BusyRegion

Purpose

The busy state at the scale of a page: while a navigation loads, the content area drops to the hollow, takes a rule at the top and a fixed ring at the corner, and says so with aria-busy. The class and the attribute go together, so the rule cannot repaint everything that already carries aria-busy.

When to use, when not

Use it on the content area of an app shell, driven by the navigation state, or on a part of a page that reloads on its own. Do not use it for a button (Button has busy) nor for a wait shorter than a frame.

Anatomy

1. A main, section or div, with aria-busy when busy.
2. Under motion, a ring fixed at the top right of the viewport, in the soft ink.

Props

Props of BusyRegion

Name	Type	Default	What it does
busy	boolean		The zone is waiting on something: aria-busy goes on, the ring turns.
as?	'main' | 'section' | 'div'	'div'	The element: `main` for the content area, `section` or `div` for a part of it.
class?	string	''	Layout classes only: the zone's own padding and width.
children	Snippet

Every other attribute of Omit<HTMLAttributes<HTMLElement>, 'children'> passes through to the element.

States

Idle and busy.

asSection

Light

Une partie de page qui se recharge seule.

Dark

Une partie de page qui se recharge seule.

320 px, light

Une partie de page qui se recharge seule.

320 px, dark

Une partie de page qui se recharge seule.

216 px, light

Une partie de page qui se recharge seule.

Forced colours, captured

busy

aria-busy on the zone, the hollow, a rule at the top; the ring turns under motion only.

Light

Le tableau des audits, pendant qu'une page se charge.

Dark

Le tableau des audits, pendant qu'une page se charge.

320 px, light

Le tableau des audits, pendant qu'une page se charge.

320 px, dark

Le tableau des audits, pendant qu'une page se charge.

216 px, light

Le tableau des audits, pendant qu'une page se charge.

Forced colours, captured

idle

Light

Le tableau des audits.

Dark

Le tableau des audits.

320 px, light

Le tableau des audits.

320 px, dark

Le tableau des audits.

216 px, light

Le tableau des audits.

Forced colours, captured

Accessibility contract

• Role and name: those of the element chosen with as; the component adds none.
• Keyboard, focus: none. Busy never moves the focus.
• Live regions: none; aria-busy is the state, and the page announces the outcome when the wait ends.
• Reduced motion: no ring; the hollow and the rule carry the wait.

Content rules

None of its own.

Do and don’t

• Do drive busy from the navigation state, so it clears by itself.
• Do not set aria-busy by hand next to it.

Examples

<BusyRegion as="main" id="main-content" tabindex="-1" busy={navigation.occupee}>
	{@render children()}
</BusyRegion>

Surfaces

• App: the lab layout’s content area, through the AppShell.

Related

Button.

Decisions

• 2026-09-24: created from the base layer’s zone-occupee, which stayed for the lab layout until the shell moved to the atoms on 2026-09-25.

Criteria held by construction

• 7.1, Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?
  The wait is a state assistive technology can read: aria-busy on the zone, set and cleared by the page, never a spinner alone.
• 13.8, Dans chaque page web, chaque contenu en mouvement ou clignotant est-il contrôlable par l'utilisateur ?
  The ring turns under motion only; with reduced motion the hollow and the rule at the top say the wait.

Tokens it reads

• Colour: --rl-action, --rl-ink-soft, --rl-sunken
• Spacing: --rl-space-5
• Layout: --rl-border-strong, --rl-z-busy
• Motion: --rl-duration-spin

Seen in patterns

• App shell