SpinnerSequence

import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';

import * as SpinnerSequenceStories from './SpinnerSequence.stories';

<Meta of={SpinnerSequenceStories} name='Usage' />

<Title />

## Purpose

A Spinner that tells people what is happening. It shows a list of steps, one text at a time, then ends on an illustration and a final text. Use it for a wait of several seconds with stages, such as setting up an account. For a short or single-stage wait, use the Spinner.

You set the texts, how long each shows (`defaultDuration`, or `duration` on a step) and the illustration (`illustrationName`, or your own `illustration`).

## Usage

- Write each step as what the system is doing now, and the final text as what happens next.
- Timers are a guess. When the real work can say where it is, set `activeStep` and move the steps yourself.
- `onComplete` fires once when the final state shows, for example to move to the next page.
- A timed sequence runs once. To run it again, remount it (change its `key`); a controlled one goes back when `activeStep` goes back.

## Implementation

See the table below for the available props. The other stories show every variant and state.

<hr />

<Canvas of={SpinnerSequenceStories.Default} />
<Controls of={SpinnerSequenceStories.Default} />

<hr />

<Canvas of={SpinnerSequenceStories.ControlledByTheWork} />