GenerationProgress
ExperimentalShows how a slow AI task is going: waiting, making it, ready to listen early, finishing, done, failed or cancelled.
Also known as progress, generating, render progress, progress bar
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Try each state
Generating
About 30 seconds left
<GenerationProgress status="generating" percent={42} eta="About 30 seconds left"
onCancel={() => {}} />Switch the state to see each one. The percent bar shows only while making it, with a percent.
When to use it
Shows where a slow task stands, from waiting to done or failed. A placeholder the same shape as the result holds its place, so the page does not jump when it arrives.
Made of: Result area (placeholder, flat waveform or result) · Status · Time left · Listen now · Cancel, Retry or Start again · Progress bar · Error message · Credits note
Use it for
- Making an image, video or file that takes more than a few seconds.
- Waiting in line before the work starts: show the queue position.
- A task that can fail and be tried again.
- A song, voice-over or sound effect: use previewShape="audio", and streaming when the start can be played early.
Not for
- A short wait for a chat reply: use TypingIndicator.
- A list of steps an agent is working through: use Checklist.
- An amount used out of a limit: use Meter.
Do and avoid
Generating
About 1 min left
Generating
About 1 min left
Do
- Make the result area the same shape as the result, so the page does not jump.
- Offer Cancel for anything that takes more than a few seconds.
- Say why it failed.
- Pass percent only when you know the real progress. Without it, a moving bar shows instead.
- For audio, use previewShape="audio" and say what is coming in previewLabel, such as "Song, about 2 minutes".
- Say what cancelling does to credits with refundNote, when you know it.
Avoid
- Do not fake a percent. Use the moving bar instead.
- Do not announce every percent change. This component already avoids that.
- Do not use amber for waiting in line. Waiting is not something the person must act on.
- Do not remove Cancel once the task has started.
- Do not autoplay streaming audio. Offer Listen now and let the person press it.
- Do not draw a fake waveform in the placeholder. The flat bars say the sound is not there yet.
On a phone
- The preview area and the status line fill the width; the status text, time left and action wrap onto new lines.
- The preview area takes its height from the class you pass, so size it for a narrow screen.
- Action buttons are 44px tall on a touch screen and wrap onto a new line when space is short.
- The audio placeholder fills the width at a fixed short height, so it does not take a 16:9 block on a phone.
Seen in products
- Runway says Gen-4 takes minutes and Gen-4 Turbo can do 10 s in about 30 s.
- Perplexity shows a progress display of sources read and findings as they arrive (secondary).
- Gemini Deep Research reports can run in the background (primary).
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| statusrequired | "queued" | "generating" | "streaming" | "finalising" | "done" | "failed" | "cancelled" | none | Current state. streaming: the start can already be played while the rest is made. cancelled: the person stopped it. |
| percent | number | none | 0 to 100. A bar shows while generating or streaming. Omit for an indeterminate bar. |
| queuePosition | number | none | Shown beside Queued. |
| eta | string | none | Time estimate, shown while queued, generating, streaming or finalising. |
| error | string | none | Message shown, and announced, when failed. |
| onCancel | () => void | none | Shows Cancel while queued, generating, streaming or finalising. |
| onRetry | () => void | none | Shows Retry when failed, and Start again when cancelled. |
| onListen | () => void | none | Shows Listen now while streaming. Start playback only from this press. |
| listenLabel | string | "Listen now" | Text for the Listen now button. |
| preview | ReactNode | none | Result shown when done, and while streaming if you pass a player that can play early. A placeholder fills the area before then. |
| previewShape | "media" | "audio" | "media" | audio swaps the 16:9 block for a flat waveform with a label. |
| previewLabel | string | "The audio will appear here" | Words in the audio placeholder, such as "Song, about 2 minutes". |
| previewClassName | string | "aspect-video" (media), none (audio) | Classes for the preview area, to match the result shape. |
| refundNote | string | none | What cancelling does to credits. Shown next to Cancel while work runs and after cancelling, and read out with Cancelled. |
| labels | Partial<Record<GenerationStatus, string>> | none | Replaces the text for a status. Also used for the announcement. |
| className | string | none | Extra classes for the wrapper. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one GenerationProgress switches all of this from its properties panel, across 14 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Status | status | Queued, Generating, Streaming, Finalising, Done, Failed, Cancelled |
| Preview shape | previewShape | Media, Audio |
| Eta | eta | Any text |
| Error | error | Any text |
Tokens
Change one of these and every part that uses it follows.
--surface--surface-sunken--border--fg-subtle--danger-fg--radius-card
Built in
- Screen readers hear the status only when it changes, such as "Generating" or "Done", never each percent.
- The visible status line is hidden from screen readers, so nothing is said twice.
- The percent bar is a meter named "Generation progress".
- A failure shows an icon and the words "Generation failed", not color alone.
- The placeholder is hidden from screen readers, and its shimmer stops when people turn off motion in their system settings.
- The audio placeholder's label is plain text; its flat bars are hidden from screen readers.
- Cancelled shows an icon and the word Cancelled, and the announcement includes the credits note.
- Listen now, Cancel, Retry and Start again are 44px tall on a touch screen.
What you need to do
- Pass error with a reason, so screen readers hear why it failed.
- Give the finished result its own text alternative.
- Pass refundNote only when your product knows whether cancelling returns credits. Never guess.
- Listen now must not start playback by itself somewhere off screen. Move focus to the player you show.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide