Skip to content

chore (react-spinner): Rewrite Spinner animation using only rotation transforms#30567

Merged
behowell merged 16 commits intomicrosoft:masterfrom
behowell:spinner/conic-gradient-animation
Mar 4, 2024
Merged

chore (react-spinner): Rewrite Spinner animation using only rotation transforms#30567
behowell merged 16 commits intomicrosoft:masterfrom
behowell:spinner/conic-gradient-animation

Conversation

@behowell
Copy link
Contributor

@behowell behowell commented Feb 17, 2024 •
edited
Loading

Previous Behavior

Spinner currently animates a svg's circle path. This type of animation is not optimized by browsers to run on the compositor thread. As a result, if the main thread is busy while the loading spinner is visible, it drops frames from the animation.

New Behavior

  • Update the animation to use new timing values from design. The spinner rotates roughly twice as fast, and the tail has a minimum width of 1/12th of the circle (previously it completely disappeared for part of the animation).
  • Replace the SVG animation with only rotation transform animations. The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask. The segments are rotated out from behind the mask to expand the visible arc from 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc. The tail and spinner itself also have 360deg rotation animations for the spin.
  • Add new visuals when reduced-motion is enabled: a gradient spinner that doesn't change size as it rotates.
  • Fix RTL animation.

See a live demo on the Pull-Request Demo Site.
Tip; To see the reduced motion visuals on Windows, go to Settings > Accessibility > Visual effects > Animation effects: off.

Related Issue(s)

@behowell behowell self-assigned this Feb 17, 2024
@fabricteam
Copy link
Collaborator

fabricteam commented Feb 17, 2024 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-spinner
Spinner		 23.517 kB
8.512 kB		 24.696 kB
8.341 kB		 1.179 kB
-171 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme		 71.098 kB
20.514 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 217.207 kB
61.943 kB
react-components
react-components: FluentProvider & webLightTheme		 43.585 kB
14.351 kB
react-portal-compat
PortalCompatProvider		 7.944 kB
2.588 kB
🤖 This report was generated against 1fa9745b9155c4fec5fe435acc29eee0b40eb695

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 17, 2024 •
edited
Loading

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender-with-unmount 73 78 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 633 588 5000
Button mount 304 300 5000
Field mount 1074 1125 5000
FluentProvider mount 695 692 5000
FluentProviderWithTheme mount 76 81 10
FluentProviderWithTheme virtual-rerender 58 59 10
FluentProviderWithTheme virtual-rerender-with-unmount 73 78 10 Possible regression
MakeStyles mount 856 847 50000
Persona mount 1773 1706 5000
SpinButton mount 1349 1333 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 17, 2024 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

@behowell behowell force-pushed the spinner/conic-gradient-animation branch from efee710 to b846c5c Compare February 21, 2024 20:46
@behowell behowell changed the title chore: Replace Spinner's SVG animation with rotation animations so it can run on the compositor thread chore (react-spinner): Use only rotation transforms for Spinner animations Feb 21, 2024
@behowell behowell changed the title chore (react-spinner): Use only rotation transforms for Spinner animations chore (react-spinner): Rewrite Spinner animation using only rotation transforms Feb 21, 2024
@tomi-msft tomi-msft mentioned this pull request Feb 21, 2024
Closed
2 tasks
@behowell behowell marked this pull request as ready for review February 23, 2024 19:21
@behowell behowell requested review from a team and tomi-msft as code owners February 23, 2024 19:21
@behowell behowell requested a review from a team February 26, 2024 07:55
@tomi-msft tomi-msft mentioned this pull request Feb 26, 2024
Merged
spmonahan
spmonahan reviewed Feb 26, 2024
View reviewed changes
@behowell behowell requested a review from a team as a code owner February 29, 2024 23:58
@behowell behowell merged commit a33664d into microsoft:master Mar 4, 2024
@behowell behowell deleted the spinner/conic-gradient-animation branch March 4, 2024 18:40
@behowell behowell mentioned this pull request Mar 5, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@fabricteam fabricteam fabricteam left review comments

@spmonahan spmonahan spmonahan approved these changes

+1 more reviewer

@tomi-msft tomi-msft tomi-msft approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@behowell behowell

Labels

Area: Performance Component: Spinner

Projects

None yet

Milestone

March Project Cycle Q1 2024

Development

Successfully merging this pull request may close these issues.

[Bug]: fluent v9 Spinner from react-components package uses main thread for animation, causes jank under CPU load

4 participants

@behowell @fabricteam @tomi-msft @spmonahan