# WaitingScreen > Patient waiting screen with ticket, position, estimated wait, now serving, room, a live connection indicator and a called state, driven by pure queue math. Source: https://docs.nasaqui.com/components/waiting-screen ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/waiting-screen.json ``` What a patient sees on their own phone while they wait. It takes the whole queue so position, estimate and now serving always agree with what reception sees. QueueLiveIndicator is the small live, reconnecting or offline badge shared with the clinic screens. The queue-math helpers (positionInQueue, estimateWaitMinutes, callNext and friends) are exported too. ## When to use - A patient checked in and waits for their turn. - A QR on the ticket opens this page. ## When not to use - A shared board in the waiting room: use LobbyDisplay. - The doctor's list: use ClinicQueue. ## Import ```tsx import { QueueConnection, QueueLiveIndicator, WaitingScreen } from "@fadymondy/nasaq/web"; // inside this monorepo: "@nasaq/web" ``` ## Quick start ```tsx import { WaitingScreen } from "@fadymondy/nasaq/web"; api.leave(myEntryId)} /> ``` ## Anatomy ``` WaitingScreen data-slot="waiting-screen" ├─ header clinic name and QueueLiveIndicator ├─ ticket card big ticket, position, estimated wait ├─ now serving └─ leave button (onLeave) QueueLiveIndicator data-slot="queue-live-indicator" ``` ## API Every `div` prop is passed through unless noted. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `entries` | `QueueEntry[]` | `required` | The whole queue. | | `entryId` | `string` | `required` | Which entry is this patient. | | `averageMinutes, rooms` | `number` | 10, 1 | For the estimate. | | `clinic` | `string` | | Name in the header. | | `connection` | `"live" \| "reconnecting" \| "offline"` | `"live"` | Live state of your data feed. | | `updatedAt, now` | `number` | | Epoch milliseconds. now is for stories. | | `onLeave` | `() => Promise` | | Leave the line. Omit to hide the button. | | `labels` | `Partial` | | Override any string. | ## Examples **Wire it to a socket** ```tsx const [connection, setConnection] = useState("live"); socket.onclose = () => setConnection("reconnecting"); ``` ## Accessibility - Position and wait changes are announced politely; the called state is announced assertively once. - Live state is text plus icon, not only a dot colour. ## RTL & i18n - Ticket numbers stay left to right; the layout mirrors. - Strings live in a `STRINGS = { en, ar }` object and any of them can be replaced with `labels`. The locale comes from `NasaqProvider`. ## Styling & tokens - Colours, radii and type come from `--nq-*` tokens; nothing is a raw colour. Spacing and alignment use logical classes. - Target `[data-slot="waiting-screen"]` and the inner `data-slot` parts shown in the anatomy. ## Do / Don't - Do keep the async callbacks honest: return `{ error }` so the component can show the message. - Do pass `now` in tests and stories so the output stays the same. - Don't fetch inside the component: it is presentational and takes data and callbacks. - Don't rely on colour for state: every state also has a word. ## Related - [`lobby-display`](https://docs.nasaqui.com/components/lobby-display) - [`check-in-kiosk`](https://docs.nasaqui.com/components/check-in-kiosk) - [`clinic-queue`](https://docs.nasaqui.com/components/clinic-queue) ## Lab https://docs.nasaqui.com/?path=/docs/components-bookings-waiting-screen--docs ## Code ### React ```tsx import { WaitingScreen } from "@fadymondy/nasaq/web"; api.leave(myEntryId)} /> ``` ### shadcn ```tsx import { WaitingScreen } from "@/components/ui/waiting-screen"; api.leave(myEntryId)} /> ``` ### Vue ```vue ``` ### Blade ```blade @php $t = now()->getTimestamp() * 1000; $base = ['priority' => 'normal', 'checkedInAt' => $t - 600000]; $queue = [ $base + ['id' => 'q1', 'ticket' => 'A-014', 'number' => 14, 'status' => 'serving', 'room' => '2', 'queuedAt' => $t - 900000, 'calledAt' => $t - 300000], $base + ['id' => 'q2', 'ticket' => 'A-015', 'number' => 15, 'status' => 'waiting', 'queuedAt' => $t - 500000], $base + ['id' => 'q3', 'ticket' => 'A-016', 'number' => 16, 'status' => 'waiting', 'queuedAt' => $t - 400000], $base + ['id' => 'me', 'ticket' => 'A-017', 'number' => 17, 'status' => 'waiting', 'queuedAt' => $t - 300000], ]; @endphp ``` ### HTML + Alpine ```html
Live · Updated 12 s ago

Your ticket

Waiting
A-017
Your place in line 3 2 people ahead of you
Estimated wait About 10 min

Now serving

  • A-014 Room 2
```