SpinnerSequence

Problem

Setting something up (for example a business account) takes a few seconds and has several stages. A single Spinner with one label says nothing about progress, and it ends abruptly when the next screen loads. The onboarding flow in the UVP design shows a better pattern: the spinner stays, its text changes stage by stage, and it ends on a "done" illustration with a closing line.

Proposal

A new component, SpinnerSequence, that composes the existing PDS v2 Spinner and Illustration (the Spinner is not changed).

• The team sets the steps (text, and optionally how long each shows) and as many as needed.
• The last state is an illustration with a final text. The default is the task illustration (from the PDS Design Library v2); a team can pick another PDS illustration or pass its own node.
• Default 64px (5xl); size is a prop.
• It can run on timers, or be driven by the real work (activeStep), and tells the page when it is done (onComplete).

Constraints

• Screen readers hear each new text once (one polite live region) and the final text. The spinner and the illustration are decorative.
• Reduced motion: no fade, no animation; the timing still runs.
• No text inside the component: every text comes from props.
• The illustration is drawn at the spinner size, so nothing moves at the end.

Source

The "Page 4 - Loading loop" artboard in the Claude Design project "Complete your profile" (ring spinner, 2 seconds per text, then a check illustration). Figma: Illustration=TASK in PDS Design Library v2 (node 5267:5707). No Jira link.