[Bug]: Skeleton uses main thread for animation, causes jank under CPU load

Library

React Components / v9 (@fluentui/react-components)

System Info

N/A

Are you reporting Accessibility issue?

Reproduction

https://react.fluentui.dev/?path=/docs/components-skeleton--default#default

Bug Description

Actual Behavior

Under CPU load, the spinning animation produces jank and frames are dropped because the animation relies on the main thread to update.

This can be observed by the fact that the animation is painting every frame. In Edge DevTools, press Ctrl+Shift+P to show green rectangles on paint. The Skeleton is always showing a green rectangle, whereas the Spinner component (due to #29139 getting fixed) is not.

Expected Behavior

The animation can be offloaded to the compositor and is free from jank regardless of the CPU load. (Note: this is how the shimmer imported from fluentui/react@^8.0 behaves).

Let me know if it helps to provide profiles for both the good and the perf-impacted spinner. Happy to help where possible. My alias is tigeroakes and magostis should also be able to help out here. Thanks!

Logs

No response

Requested priority

Normal

Products/sites affected

Microsoft Loop

Are you willing to submit a PR to fix?

yes

Validations

[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] The provided reproduction is a minimal reproducible example of the bug.

microsoft / fluentui