feat(react-progress): migrate ProgressBar from CSS to motion components

[robertpenner]

Previous Behavior

• The indeterminate ProgressBar sliding animation was driven by CSS @keyframes that animated the left style property.
• Because left animation triggers layout recalc, the animation ran on the main thread and was susceptible to jank.
• Reduced motion (opacity pulse) was handled via @keyframes and @media (prefers-reduced-motion: reduce).

New Behavior

• The indeterminate animation is now powered by a custom motion component.
• It animates translate instead of left, making the animation run on the compositor thread and jank-proof.
• Reduced motion is handled via the motion component's reducedMotion option.

Code Changes

• Created progressBarMotions.ts with a ProgressBarIndeterminateMotion motion component
• Updated renderProgressBar.tsx to wrap the bar slot with the motion component when value is undefined (indeterminate)
• Removed CSS @keyframes animations and related styles from useProgressBarStyles.styles.ts
• Added @fluentui/react-motion as a dependency

Testing

• Tested using the Jank Simulator Edge extension.
  • The previous left-based CSS animation becomes choppy when the main thread is busy.
  • But the new translate-based motion component runs smoothly without disruption.

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: entire library	1.292 MB 323.336 kB	1.292 MB 323.168 kB	-706 B -168 B
react-progress ProgressBar	15.7 kB 6.214 kB	19.69 kB 7.724 kB	3.99 kB 1.51 kB

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	70.397 kB 19.96 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	236.62 kB 68.716 kB
react-components react-components: FluentProvider & webLightTheme	43.612 kB 14.022 kB
react-portal-compat PortalCompatProvider	8.386 kB 2.624 kB
react-timepicker-compat TimePicker	108.174 kB 35.695 kB

_{🤖 This report was generated against 2095d48e326c499b63ea3d0c49edc67ea1d2104b}

[github-actions]

Pull request demo site: URL