Long wait escalationPro

The pending state for a request that might take a while: nothing for 300 ms, then Thinking, then Still working with the seconds, then an offer to be notified when it is done, keep waiting or cancel.

Markdown

On this page

ProThe full escalation on a short clock: Thinking, Still working, then the offer to be notified.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/long-wait-escalation

Usage

tsx

import { LongWaitEscalation } from "@/components/ui/chatcn/pro/long-wait-escalation"

<LongWaitEscalation
  active={waitingForFirstToken}
  waitKey={request.id}
  onNotify={subscribeToCompletion}
  onCancel={stop}
/>

It encodes the kit's pending rules in one component: the sent message is the feedback for the first 300 ms, Thinking stays at least 400 ms once shown, and only real waits escalate. Set thresholds to match your model: { show, still, offer } in ms, default 300, 8000 and 20000. Keep waiting hides the offer for another offer interval.

Examples

Each step

Pass elapsedMs to drive it from your own clock, or to freeze a step as here.

ProEach step frozen: nothing, Thinking, still working, the offer and notified.

Props

Prop	Type	Notes
`active`	`boolean`	True while waiting for the first visible output. Default `true`
`waitKey`	`Key`	Restarts the clock
`elapsedMs`	`number`	Elapsed ms from your own clock
`thresholds`	`{ show?, still?, offer? }`	Default 300, 8000 and 20000 ms
`label`, `stillLabel`	`string`	Default "Thinking" and "Still working"
`offerText`	`ReactNode`	Why the offer appears
`onNotify`	`() => void`	Shows Notify me when done
`notified`	`boolean`	Controlled. Shows the confirmation line
`onKeepWaiting`	`() => void`	Called when Keep waiting is pressed
`onCancel`	`() => void`	Shows Cancel
`labels`	`{ notify?, keepWaiting?, cancel?, cancelRequest?, notified? }`	Button and confirmation copy for other languages

Accessibility

A status region announces each step once (Thinking, Still working, Taking longer than usual), never the ticking seconds.
The offer never takes focus; it waits to be reached with Tab. Buttons grow to 44 px on touch screens.

Motion

Labels crossfade over 150 ms. The offer drops 4 px into place with a fade over 200 ms; under reduced motion it only fades.
The shimmer is the only one in the kit and turns static under reduced motion.