#101
Section loader
A card with a centered 40px spinner and a Loading data text.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Section loader" pattern (@codeatlasdev/ui demo #101, feedback/spinner) in my app.
Call get_demo({ ids: ["#101"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Loader for a whole section or panel while its data is fetched.
Keep these library parts, with the props and tokens the demo uses:
- Spinner, Card, Stack from "@codeatlasdev/ui"
Behaviour to keep:
- `<Card p="10" full>`
- `<Stack align="center" gap="3">` centers the spinner and text
- `<Spinner size={40} />` above `<span class="text">Loading data…</span>`
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Loading source.