Queue positionPro

A job waiting its turn: 3rd in queue, with the number rolling down as the line moves, an honest wait range, a Notify me toggle so people can leave the tab, and Leave queue.

Markdown

On this page

ProThe line moves every 1.8 s: the position rolls down, the wait shrinks, then the job starts.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/queue-position

Usage

tsx

import { QueuePosition } from "@/components/ui/chatcn/pro/queue-position"

<QueuePosition
  position={job.position}
  wait={[40_000, 90_000]}
  label="Video render"
  onNotifyChange={setNotify}
  onLeave={leaveQueue}
/>

The number rolls with number-flow and the ordinal suffix morphs with text-morph, so 3rd to 2nd to 1st reads as one movement. Set status="starting" when the job is picked up and "left" after Leave queue, which offers Rejoin when you pass onRejoin. For other languages, pass formatSuffix and queueLabel.

Examples

States

ProQueued, next with notifications on, a long line, starting, left and disabled.

Props

Prop	Type	Notes
`position`	`number`	Required. 1 is next
`status`	`"queued" \| "starting" \| "left"`	Default `queued`
`wait`	`number \| [min, max] \| { min, max }`	Expected wait in ms, shown as a range
`label`	`ReactNode`	What is waiting
`notify`, `defaultNotify`, `onNotifyChange`	`boolean`	Notify me, controlled or uncontrolled
`onLeave`	`() => void`	Shows Leave queue
`onRejoin`	`() => void`	Shows Rejoin queue after leaving
`formatSuffix`	`(position) => string`	Default English ordinals
`queueLabel`	`string`	Default "in queue"
`disabled`	`boolean`	Dims and disables the controls

Keyboard

Key	Action
`Tab`	Move between Notify me and Leave queue
`Space`, `Enter`	Toggle Notify me, or leave

Accessibility

Notify me is a toggle button with aria-pressed; its label stays the same and the bell rings when on.
Position changes are announced in words (2nd in queue, about 20 to 40 seconds wait) at most every 3 s.
Controls grow to 44 px on touch screens.

Motion

The number rolls down over 300 ms and the suffix glides over 240 ms. Reduced motion crossfades the number and swaps the suffix.