Loaders
Two loading affordances built around the same pattern. `Spinner` is the inline indicator — small, lives inside buttons, inputs, list items, and toasts. `LoadingOverlay` is the full-surface page or panel loader with the animated Morada brand mark.
Spinner
A spinning Tabler `IconLoader` wrapped at default `size-4`. Use it directly anywhere you need a small "working…" indicator. Override with `className` for size, color, or opacity.
Inside a Button
Subtle (search input, async select)
Sizing
Pass any Tailwind `size-*` to scale up.
LoadingOverlay
Full-surface loader with the Morada brand mark animated. Use for app boot, auth bridges, top-level Suspense, or any region whose contents aren't ready yet.
Inline preview
The mark breathes while the inner monogram strokes itself in, fills, holds, and resets — reads as the brand mark assembling itself.
Loading…
Trigger overlays
Each button shows the overlay for ~2.5 seconds. `position="fixed"` covers the viewport (app boot). `position="absolute"` covers the nearest positioned ancestor (Suspense in a card, panel, or routed region — wrap the parent in `relative`).
Section content
This region is the relatively-positioned ancestor. Click the region trigger above to see the overlay appear only here.