chore: Replace Spinner's SVG animation with rotation animations so it can run on the compositor thread

[behowell]

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

Replace the SVG animation with only rotation transform animations. To achieve this, the spinner tail is composed of two 120deg segments (spinnerTail::before and spinnerTail::after), covered by a mask (spinnerTail) that masks out a 120deg segment. The two segments are rotated out from behind the mask, while the mask itself rotates. The resulting rotations very closely match the original SVG animation.

Related Issue(s)

• Fixes #

[fabricteam]

📊 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]

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[bot]]

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.