feat(Spinner): add support for synchronized animations

[joshblack]

Closes https://github.com/github/primer/issues/6105

Uses a technique from Spectrum to drive our Spinner animations so that they are always in sync: https://github.com/adobe/react-spectrum/blob/ab5e6f3dba4235dafab9f81f8b5c506ce5f11230/packages/%40react-spectrum/s2/src/Skeleton.tsx#L21

Changelog

New

• Add story for synchronized spinners demo

Changed

• Update our animation logic for Spinners to be JS-driven in order to synchronize them

Removed

Rollout strategy

• Minor release

Potentially we'll want to have this behind a FF in case we are not confident in this change everywhere.

[changeset-bot]

🦋 Changeset detected

Latest commit: 6ecc8cb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Minor
@primer/styled-react	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[Copilot]

Pull Request Overview

This PR updates the Spinner component to synchronize animations across all spinner instances using the Web Animations API instead of CSS animations. This ensures that multiple spinners rendered at different times maintain visual synchronization, creating a more polished user experience.

Key changes:

• Replaced CSS-based animations with JavaScript Web Animations API to enable synchronization
• Added useSpinnerAnimation hook that sets startTime to 0 for all spinner instances
• Maintained accessibility by respecting prefers-reduced-motion preference

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
packages/react/src/Spinner/Spinner.tsx	Implements Web Animations API-based animation synchronization via new useSpinnerAnimation hook
packages/react/src/Spinner/Spinner.module.css	Removes CSS keyframe animation since animation is now handled in JavaScript
packages/react/src/Spinner/Spinner.examples.stories.tsx	Adds SynchronizedSpinners story demonstrating the synchronization feature with delayed spinner mounts
.changeset/afraid-buckets-build.md	Documents the change as a minor version update

[siddharthkp]

@joshblack Did you see the css first implementation with little javascript in https://github.com/github/github-ui/pull/6120, it uses negative animation-delay which I thought was very smart

[joshblack]

@siddharthkp yeah! I didn't really know if it would synchronize accurately 🤔 When I tried it out and slowed it down they seemed to be off a bit:

Screen.Recording.2025-11-12.at.3.37.56.PM.mov

This could be related to test setup though. Definitely the faster the animation the less I can see it (if at all). I also wasn't sure what would happen with the difference between SSR / client hydration and if the spinner would jump if the delay changes between what is sent in the HTML payload versus hydration

[siddharthkp]

When I tried it out and slowed it down they seemed to be off a bit

Seems super odd!

Definitely the faster the animation the less I can see it (if at all)

Valid, not sure if it matters in the case of spinners.

I also wasn't sure what would happen with the difference between SSR / client hydration and if the spinner would jump if the delay changes between what is sent in the HTML payload versus hydration

My (untested) guess is that it might start out of sync and then hydrate to be in sync. That would make a really cool demo!