Batch progress gridPro

A batch of generations as a grid of tiles, each in its own state: queued, running with its progress, done with the image, failed with Retry, or filtered with the reason, under a header with the count, the overall progress, Retry failed and Cancel all.

Markdown

On this page

ProEight variations in parallel: one fails and can be retried, one is filtered, the rest land.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/batch-progress-grid

Usage

tsx

import { BatchProgressGrid } from "@/components/ui/chatcn/pro/batch-progress-grid"

<BatchProgressGrid
  title="Library facade, 8 variations"
  items={tiles}             // { id, status, progress?, src?, alt?, error?, reason? }[]
  aspectRatio="4:5"
  onRetry={retryOne}
  onRetryFailed={retryAllFailed}
  onCancelAll={cancelBatch}
/>

Each tile takes its own status. Running tiles fill from the bottom with their percent; without progress they show the kit's spinner. Failed tiles say why and offer Retry, filtered tiles say what the filter held back. Pass onSelect to make finished tiles open a viewer.

Examples

States

ProEvery tile state, a settled batch with a filtered tile and an empty batch.

Props

Prop	Type	Notes
`items`	`BatchTile[]`	Required
`title`	`ReactNode`	Heading for the batch
`aspectRatio`	`"W:H" \| number`	Tile shape. Default 1
`columns`	`number`	Fixed columns. Default: as many 120 px columns as fit
`noun`	`string`	For counts and screen readers. Default "image"
`onRetry`	`(id) => void`	Retry on each failed tile
`onRetryFailed`	`() => void`	Retry failed in the header
`onCancelAll`	`() => void`	Cancel all while anything is queued or running
`onSelect`	`(id) => void`	Finished tiles become buttons
`labels`	`Partial<BatchProgressGridLabels>`	Every string the grid shows or announces, counts included, for translation

Accessibility

The grid is a list. Each tile starts with a hidden name such as Image 3: 58% or Image 5: failed, out of credits. Retry buttons are named per tile.
The header bar is a progressbar with a value text like 6 of 8 done. When the batch settles a polite live region says 6 images ready, 1 failed, 1 filtered.
Failed tiles pair a red hairline and icon with the word Failed; filtered tiles use a neutral icon and the reason.

Motion

Running fills move with clip-path and the header bar with scale, both over 300 ms. Tile states crossfade over 200 ms and images fade in once loaded. Reduced motion keeps the fades and drops the movement.