Skip to content

Stop the spinner and skeleton loops when motion is reduced - #64

Open
ryoaonetsuki wants to merge 1 commit into
deeplethe:devfrom
ryoaonetsuki:fix/reduced-motion-loops
Open

ryoaonetsuki wants to merge 1 commit into
deeplethe:devfrom
ryoaonetsuki:fix/reduced-motion-loops

Conversation

@ryoaonetsuki

Copy link
Copy Markdown

Why

The stylesheet already stops its own motion under prefers-reduced-motion: reduce
(the dot flash, the status shimmer, the progress sweep, the float/fade-ins), and
#58 stopped the tag's spinner the same way. But the stock components' loops were
missed: the spinner (animate-spin) and the skeleton (animate-pulse) keep
looping for readers who asked for less motion.

What changes

One rule in the reduced-motion block in src/solid-glass.css stops
animate-spin and animate-pulse. It is in the stylesheet on purpose: these are
stock components, and per CONTRIBUTING a fix for a stock component belongs in
src/solid-glass.css, not in src/components/ui/. The caret blink is left
alone deliberately: it marks where text goes, it does not decorate.

How it was checked

  • npm run typecheck and npm run build pass; registry.json is unchanged.
  • Ran the dev server and probed the computed style of a real spinner and a real
    skeleton on /dev/examples?q=spinner,skeleton: without reduced motion they
    animate (spin / pulse); with prefers-reduced-motion: reduce emulated both
    report none; back to no-preference they animate again. /dev/examples
    reports 0 failed for those examples.
  • Negative check: on the unpatched stylesheet the same probe keeps reporting
    spin / pulse under reduced motion, so the rule is what stops them.
  • The built CSS contains the override inside the reduced-motion block, after
    Tailwind's own .animate-spin utility, so it wins at equal specificity.

Limitation, stated honestly: this was checked by computed style, not by looking
at the components in both themes with my own eyes.

Signed-off-by: ryoaonetsuki <ryoaonetsuki@users.noreply.github.com>

This branch has not been deployed

No deployments
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.

1 participant