#422
Async results
A CommandPalette whose async `search` returns grouped invoice and customer records after a simulated 600 ms server delay.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Async results" pattern (@codeatlasdev/ui demo #422, navigation/command-palette) in my app.
Call get_demo({ ids: ["#422"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Command palettes that search server data (records, documents, users) next to local navigation items.
Keep these library parts, with the props and tokens the demo uses:
- CommandPalette, Button, CommandResult, NavModule from "@codeatlasdev/ui"
Behaviour to keep:
- `<CommandPalette {modules} {search} shortcut={false} onNavigate={(path) => (picked = path)} bind:open />`: the page's other palette owns Mod+K
- `function search(query: string, signal: AbortSignal)` resolves after 600 ms with `records` filtered by label and rejects with `AbortError` when the signal aborts
- `records` has 4 results in the `Invoices` and `Customers` groups
- Local `modules` items (Dashboard, Settings) filter instantly and stay above server results
- Button `Search records` opens the palette, `Selected:` shows the picked path
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
- CommandPalette
@codeatlasdev/ui - Button
@codeatlasdev/ui
How it is built
- `<CommandPalette {modules} {search} shortcut={false} onNavigate={(path) => (picked = path)} bind:open />`: the page's other palette owns Mod+K
- `function search(query: string, signal: AbortSignal)` resolves after 600 ms with `records` filtered by label and rejects with `AbortError` when the signal aborts
- `records` has 4 results in the `Invoices` and `Customers` groups
- Local `modules` items (Dashboard, Settings) filter instantly and stay above server results
- Button `Search records` opens the palette, `Selected:` shows the picked path
Related
Loading source.