Loading

Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.

Build the "Loading" pattern (@codeatlasdev/ui demo #003, inputs/button) in my app.

Call get_demo({ ids: ["#003"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Submit and save buttons that wait on a request and must block repeat clicks while keeping their label.

Keep these library parts, with the props and tokens the demo uses:
- Button from "@codeatlasdev/ui"

Behaviour to keep:
- `loading` on `variant="filled"` and `variant="outlined"` shows the spinner in place of the leading icon
- Bound to state: `loading={saving}` with `let saving = $state(false)`
- `onclick={save}` sets `saving = true` and resets it with `setTimeout(() => (saving = false), 2000)`
- Label switches with state: `{saving ? 'Saving…' : 'Save (2s)'}`

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

How it is built

• `loading` on `variant="filled"` and `variant="outlined"` shows the spinner in place of the leading icon
• Bound to state: `loading={saving}` with `let saving = $state(false)`
• `onclick={save}` sets `saving = true` and resets it with `setTimeout(() => (saving = false), 2000)`
• Label switches with state: `{saving ? 'Saving…' : 'Save (2s)'}`

Related

• #005 States component/input
• #006 Variants component/input
• #063 Submit state component/input
• #001 Full width component/input
• #002 With icons component/input
• #004 Sizes component/input