feat(Spinner): add support for synchronized animations

.changeset/afraid-buckets-build.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Update Spinner animations to be synchronized

packages/react/src/Spinner/Spinner.examples.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useEffect, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import Spinner from './Spinner'
 import {Button} from '..'
@@ -95,3 +95,38 @@ export const FullLifecycleVisibleLoadingText = () => {
     </div>
   )
 }
+
+export const SynchronizedSpinners = () => (
+  <>
+    <div>
+      <Spinner />
+    </div>
+    <div>
+      <Spinner />
+    </div>
+    <Delay ms={1500}>
+      <div>
+        <Spinner />
+      </div>
+    </Delay>
+    <Delay ms={2500}>
+      <div>
+        <Spinner />
+      </div>
+      <div>
+        <Spinner />
+      </div>
+    </Delay>
+  </>
+)
+
+function Delay({children, ms}: {children: React.ReactNode; ms: number}) {
+  const [show, setShow] = useState(false)
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setShow(true), ms)
+    return () => clearTimeout(timeout)
+  }, [ms])
+
+  return show ? <>{children}</> : null
+}

packages/react/src/Spinner/Spinner.module.css

@@ -1,13 +1,3 @@
 .Box {
   display: inline-flex;
 }
-
-@keyframes rotate-keyframes {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.SpinnerAnimation {
-  animation: rotate-keyframes var(--base-duration-1000) var(--base-easing-linear) infinite;
-}

packages/react/src/Spinner/Spinner.tsx

@@ -3,7 +3,8 @@ import {VisuallyHidden} from '../VisuallyHidden'
 import type {HTMLDataAttributes} from '../internal/internal-types'
 import {useId} from '../hooks'
 import classes from './Spinner.module.css'
-import {clsx} from 'clsx'
+import {useCallback, useRef} from 'react'
+import {useMedia} from '../hooks/useMedia'
 
 const sizeMap = {
   small: '16px',
@@ -30,6 +31,7 @@ function Spinner({
   style,
   ...props
 }: SpinnerProps) {
+  const animation = useSpinnerAnimation()
   const size = sizeMap[sizeKey]
   const hasHiddenLabel = srText !== null && ariaLabel === undefined
   const labelId = useId()
@@ -38,14 +40,15 @@ function Spinner({
     /* inline-flex removes the extra line height */
     <span className={classes.Box}>
       <svg
+        ref={animation}
         height={size}
         width={size}
         viewBox="0 0 16 16"
         fill="none"
         aria-hidden
         aria-label={ariaLabel ?? undefined}
         aria-labelledby={hasHiddenLabel ? labelId : undefined}
-        className={clsx(className, classes.SpinnerAnimation)}
+        className={className}
         style={style}
         {...props}
       >
@@ -73,4 +76,46 @@ function Spinner({
 
 Spinner.displayName = 'Spinner'
 
+function useSpinnerAnimation() {
+  const ref = useRef<Animation | null>(null)
+  const noMotionPreference = useMedia('(prefers-reduced-motion: no-preference)', true)
+  return useCallback(
+    (element: HTMLElement | SVGSVGElement | null) => {
+      if (!element) {
+        return
+      }
+
+      if (ref.current !== null) {
+        return
+      }
+
+      if (noMotionPreference) {
+        ref.current = element.animate(
+          [
+            {
+              transform: 'rotate(0deg)',
+            },
+            {
+              transform: 'rotate(360deg)',
+            },
+          ],
+          {
+            // var(--base-duration-1000)
+            duration: 1000,
+            iterations: Infinity,
+            // var(--base-easing-linear)
+            easing: 'cubic-bezier(0,0,1,1)',
+          },
+        )
+
+        // Used to sync different animations. When all animations have the same
+        // startTime they will be in sync.
+        // @see https://developer.mozilla.org/en-US/docs/Web/API/Animation/startTime#syncing_different_animations
+        ref.current.startTime = 0
+      }
+    },
+    [noMotionPreference],
+  )
+}
+
 export default Spinner