Skip to content

Stop the tag's spinner and the running step's pulse when motion is reduced - #58

Merged
WaylandYang merged 2 commits into
deeplethe:devfrom
HEOJUNFO:fix/reduced-motion-tag-tool-steps
Oct 18, 2026
Merged

WaylandYang merged 2 commits into
deeplethe:devfrom
HEOJUNFO:fix/reduced-motion-tag-tool-steps

Conversation

@HEOJUNFO

Copy link
Copy Markdown

Why

Two of Solid Glass's own components keep a looping animation when the reader has asked for reduced motion: the spinner in a Tag while progress is set (animate-spin), and a running row in ToolSteps (animate-pulse). The stylesheet already stops the other loops under prefers-reduced-motion (.animate-dot-flash, .status-shimmer, .progress-glow), and the site does the same with motion-reduce:animate-none (src/site/compare.tsx).

What changes

  • tag.tsx: the progress spinner gets motion-reduce:animate-none.
  • tool-steps.tsx: a running StepRow gets motion-reduce:animate-none with its animate-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 in src/solid-glass.css.

How it was checked

  • npm run docs, npm run typecheck and npm run build pass.
  • /dev/examples mounted 389 of 389 examples with 0 failed, in dark and light at 1440 × 1000, with reducedMotion set to both no-preference and reduce (Playwright).
  • On the same pages I read animation-name of the tag spinner and the running step row:
    • no-preference: spin / pulse, before and after.
    • reduce: spin / pulse before, none / none after.
  • I looked at tag-demo and tool-steps-list with motion reduced, in both themes.

Before review

  • Every commit is signed off (git commit -s)
  • npm run typecheck and npm run build pass
  • /dev/examples reports 0 failed
  • What the change touches was looked at in both themes

🤖 Generated with Claude Code

@WaylandYang
WaylandYang merged commit b328113 into deeplethe:dev Oct 18, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants