Add Status (idle/busy/done) state machine and Spinner#5
Open
calebpanza wants to merge 1 commit into
Open
Conversation
Add two site-agnostic UI primitives under app/ui: - Spinner: a spun loading icon (lucide LoaderCircleIcon), size-4 animate-spin, role=status / aria-label=Loading. - Status: an idle -> busy -> done state machine that cross-fades and zooms between declarative <StatusPanel> slots, animating the box size to fit the active panel. Reduced-motion aware (fade only). Composes with Spinner inside the busy panel. Adapts the reference (which imported LoadingIcon from ~/icons) to this repo's convention of importing lucide icons directly (cf. select.tsx). CUI-7
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Assignee: @calebpanza (caleb)
Summary
Adds two site-agnostic UI primitives under
app/ui, per CUI-7:Spinner(app/ui/spinner.tsx) — a spun central loading icon. Renders lucide'sLoaderCircleIconwithsize-4 animate-spin,role="status", andaria-label="Loading". FullyclassName/prop overridable.Status(app/ui/status.tsx) — the action state machineidle → busy → done. Consumers declare slots with<StatusPanel value="...">andStatuscross-fades + zooms the active panel in (and the previous one out), animating the box size to fit so differently-sized states resize smoothly instead of jumping. Honorsprefers-reduced-motion(fade only, no scale/size animation). ExportsuseStatus()for reading the active state inside the subtree. Composes with — but is independent of —Spinner(drop a<Spinner />inside the busy panel).This is the action Status, distinct from the Status Indicator dot.
Implementation notes
The reference imported
LoadingIconfrom~/icons, which does not exist in this repo. I adapted it to the establishedapp/uiconvention of importing lucide icons directly (cf.select.tsx), usingLoaderCircleIcon— the canonical spinner glyph.Testing
bun run typecheck— passesbun run lint— passesLinear
CUI-7 — Add Status (idle/busy/done) + Spinner