stop the toast loading spinner wobbling by spinning an icon instead of a glyph - #4813
Merged
Conversation
…f a glyph The loading toast rotated the '⟳' character with animate-spin. Rotation is about the center of the span's line box, but a glyph's ink sits off that point (the font's ascent/descent padding is asymmetric), so it visibly wobbled rather than turning in place — obvious on 'PortOS is restarting...', which spins for the whole restart. Use lucide's Loader2, the spinner the rest of the UI already spins, whose arc is centered in a square viewBox. A caller-supplied icon still overrides it.
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.
Summary
⟳character withanimate-spin. Rotation is about the center of the span's line box, but a glyph's ink sits off that point (the font's ascent/descent padding is asymmetric), so it visibly wobbled instead of turning in place — obvious on "PortOS is restarting...", which spins for the whole restart.Loader2— the spinner the rest of the UI already spins (ConfirmButtonPair,TabPills) — whose arc is centered in a square viewBox.iconstill overrides the spinner;success/error/warningglyphs are untouched (they don't rotate).Test plan
client:npx vitest run src/components/ui/Toast.test.jsx src/a11yConventions.test.js src/components/apps/tabs/UpdateTab.test.jsx— 62 passing, including two new regression tests: the spinning element must be ansvg(never a text glyph), and a callericonmust win over the spinner.npx biome lint --error-on-warnings src/components/ui— clean.