# Generation queue

> Cards for long AI jobs: each one shows its status, a fill and a light sweep while running, a rolling percentage, and cancel, retry and open actions.

- Type: Component (data)
- Access: Free, open source (MIT)
- Page: https://goodui.dev/native/components/generation-queue
- Markdown: https://goodui.dev/native/components/generation-queue.md
- Registry item: https://goodui.dev/native/r/generation-queue.json
- Dependencies: react-native-reanimated
- Keywords: react native job queue ui, generation progress, render queue, ai image progress, task progress list

## When to use

- Jobs that take seconds to minutes and let the person keep using the app.
- A short history of recent generations with their results.

## When not to use

- Short tasks under a second or two: use a button's own loading state.
- Long lists of finished work: use masonry-grid or a list.

## Installation

With the shadcn CLI (needs a components.json in the Expo app), then `npx expo install --fix` so native dependencies match your Expo SDK. The foundation comes along the first time.

```bash
npx shadcn@latest add https://goodui.dev/native/r/generation-queue.json
npx expo install --fix
```

The component lands in `components/goodui-native/generation-queue/` and imports the foundation from `components/goodui-native/foundation/` with relative paths; it also installs locale, rolling-number.

Built-in strings follow `<GooduiLocaleProvider>` (one [language pack](https://goodui.dev/native/r/locale-tr.json) translates the whole kit); the `labels` prop overrides them for one instance.

## Usage

```tsx
import { useGenerationQueue } from "@/components/goodui-native/ai-provider/ai-provider";
import { GenerationQueue } from "@/components/goodui-native/generation-queue/generation-queue";

const queue = useGenerationQueue({ provider });

<GenerationQueue
  jobs={queue.jobs}
  onOpen={(id) => router.push(`/result/${id}`)}
  onCancel={queue.cancel}
  onRetry={queue.retry}
/>
```

## API reference

### GenerationQueue

`import { GenerationQueue } from "@/components/goodui-native/generation-queue/generation-queue";`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `jobs` (required) | `GenerationItem[]` | – | – |
| `onOpen` | `(id: string) => void` | – | – |
| `onCancel` | `(id: string) => void` | – | – |
| `onRetry` | `(id: string) => void` | – | – |
| `labels` | `Partial<GenerationQueueLabels>` | – | – |
| `style` | `StyleProp<ViewStyle>` | – | Style for the outer container. |
| `testID` | `string` | – | Identifier for end-to-end tests. |

## Accessibility

- A finished card is a button with an open hint; other cards are disabled and read their title and status.
- Cancel and Try again are separate labeled buttons.

## Motion

- Cards spring in, shift with a layout transition and fade out.
- While a job runs, the fill springs to the progress and a light sweeps across the card.
- A finished card gives a small pop.
- Reduced motion: cards fade, with no sweep, layout transition or pop.

## Haptics

- The success cue fires when a job finishes.

## Performance

- Each running card has one repeating animation on the UI thread. The list is not virtualized, so keep it to recent jobs.

## Notes for AI

- Takes the same job shape as useGenerationQueue, plus an optional thumbnail. Map jobs to add one.
- The default failed label says credits were returned. Refund in onRefund, or override the label if you do not refund.
- `stage` is shown as it is, so translate it first.

## Related

- [AI provider](https://goodui.dev/native/components/ai-provider.md): The logic layer behind the AI components, with no UI: a typed provider adapter with an offline mock, a credit ledger that keeps subscription and bought credits apart, and a generation queue that charges, refunds and retries.
- [Credits meter](https://goodui.dev/native/components/credits-meter.md): A balance pill for an app bar whose digits roll when the balance changes and which turns warning colored when low, plus CreditsCost, a live price line that says what a job costs and what is left after it.
- [Blur reveal](https://goodui.dev/native/components/blur-reveal.md): Shows a result arriving: a scan line wipes down a blurred picture and leaves it sharp, then the frame settles with a spring and an unlock cue.

## Guidance for AI tools

Generation queue: Cards for long AI jobs: each one shows its status, a fill and a light sweep while running, a rolling percentage, and cancel, retry and open actions. Use only the documented props. Keep accessibility, reduced motion and both color schemes intact when adapting it.

Full library index: https://goodui.dev/native/llms.txt