Repository navigation
Stop the tag's spinner and the running step's pulse when motion is reduced - #58
Merged
WaylandYang merged 2 commits intoOct 18, 2026
Merged
Conversation
…duced Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]> Signed-off-by: heojunfo <[email protected]>
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
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.
Why
Two of Solid Glass's own components keep a looping animation when the reader has asked for reduced motion: the spinner in a
Tagwhileprogressis set (animate-spin), and a running row inToolSteps(animate-pulse). The stylesheet already stops the other loops underprefers-reduced-motion(.animate-dot-flash,.status-shimmer,.progress-glow), and the site does the same withmotion-reduce:animate-none(src/site/compare.tsx).What changes
tag.tsx: the progress spinner getsmotion-reduce:animate-none.tool-steps.tsx: a runningStepRowgetsmotion-reduce:animate-nonewith itsanimate-pulse.With motion reduced, nothing is lost: the tag still fills and shows its percentage, and the row still says what it is running. Both are Solid Glass components (
content/solid/), so the fix is in the component, not insrc/solid-glass.css.How it was checked
npm run docs,npm run typecheckandnpm run buildpass./dev/examplesmounted 389 of 389 examples with 0 failed, in dark and light at 1440 × 1000, withreducedMotionset to bothno-preferenceandreduce(Playwright).animation-nameof the tag spinner and the running step row:no-preference:spin/pulse, before and after.reduce:spin/pulsebefore,none/noneafter.tag-demoandtool-steps-listwith motion reduced, in both themes.Before review
git commit -s)npm run typecheckandnpm run buildpass/dev/examplesreports0 failed🤖 Generated with Claude Code