#130
Streaming rows
A LiveList that streams in 40 simulated domain availability checks, one every 150ms, after a Start bulk check button is pressed.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Streaming rows" pattern (@codeatlasdev/ui demo #130, display/live-list) in my app.
Call get_demo({ ids: ["#130"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Bulk jobs such as domain checks, imports or batch validations where results arrive one by one and the user wants to watch progress.
Keep these library parts, with the props and tokens the demo uses:
- LiveList, Button, Chip from "@codeatlasdev/ui"
Behaviour to keep:
- `<LiveList {items} total={TOTAL} {status} label="Domain checks" height="14rem">` with `const TOTAL = 40`
- State: `let items = $state<Check[]>([])` and `let status = $state<'idle' | 'running' | 'done'>('idle')`
- Row content rendered with `{#snippet item(row)}`: `row.domain` text plus a `Chip`
- `<Chip size="sm" variant={row.free ? 'success' : 'default'}` labelled Available or Taken from `row.free`
- `<Button variant="filled" onclick={start} disabled={status === 'running'}>` starts the stream, label becomes Checking… while running
- `start()` pushes one item with `domain` and `free` every 150ms with `setInterval` and sets `status = 'done'` at `TOTAL`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- `<LiveList {items} total={TOTAL} {status} label="Domain checks" height="14rem">` with `const TOTAL = 40`
- State: `let items = $state<Check[]>([])` and `let status = $state<'idle' | 'running' | 'done'>('idle')`
- Row content rendered with `{#snippet item(row)}`: `row.domain` text plus a `Chip`
- `<Chip size="sm" variant={row.free ? 'success' : 'default'}` labelled Available or Taken from `row.free`
- `<Button variant="filled" onclick={start} disabled={status === 'running'}>` starts the stream, label becomes Checking… while running
- `start()` pushes one item with `domain` and `free` every 150ms with `setInterval` and sets `status = 'done'` at `TOTAL`
Related
Loading source.