#490
Dedupe and replace by id
Two buttons: one fires the same error ten times and shows a single toast with a ×10 badge, the other replaces an uploading toast by id.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Dedupe and replace by id" pattern (@codeatlasdev/ui demo #490, feedback/toast) in my app.
Call get_demo({ ids: ["#490"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Polling or parallel requests that fail with the same message, and progress toasts that turn into a result.
Keep these library parts, with the props and tokens the demo uses:
- Button, Toaster, toast from "@codeatlasdev/ui"
Behaviour to keep:
- `<Toaster />` mounted once, `toast` imported from `@codeatlasdev/ui`
- Dedupe: `toast.error('Too many requests, retry later.')` called in a loop of 10 keeps one toast, bumps its count badge and restarts its timer
- Replace: `toast.info('Uploading report.pdf…', { id: 'upload', duration: 0 })` then `toast.success('report.pdf uploaded.', { id: 'upload' })` swaps the same toast in place
- Both triggers are `<Button variant="outlined"`
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
- Button
@codeatlasdev/ui - Toaster
@codeatlasdev/ui
How it is built
- `<Toaster />` mounted once, `toast` imported from `@codeatlasdev/ui`
- Dedupe: `toast.error('Too many requests, retry later.')` called in a loop of 10 keeps one toast, bumps its count badge and restarts its timer
- Replace: `toast.info('Uploading report.pdf…', { id: 'upload', duration: 0 })` then `toast.success('report.pdf uploaded.', { id: 'upload' })` swaps the same toast in place
- Both triggers are `<Button variant="outlined"`
Related
Loading source.