Function useLoadingAnimation

packages/@react-spectrum/s2/src/Skeleton.tsx:32–62

(isAnimating: boolean)

import {useMediaQuery} from './useMediaQuery';

export function useLoadingAnimation(isAnimating: boolean): (element: HTMLElement | null) => void {
  let animationRef = useRef<Animation | null>(null);
  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
  return useCallback(
    (element: HTMLElement | null) => {
      if (
        isAnimating &&
        !animationRef.current &&
        element &&
        !reduceMotion &&
        typeof element.animate === 'function'
      ) {
        // Use web animation API instead of CSS animations so that we can
        // synchronize it between all loading elements on the page (via startTime).
        animationRef.current = element.animate(
          [{backgroundPosition: '100%'}, {backgroundPosition: '0%'}],
          {
            duration: 2000,
            iterations: Infinity,
            easing: 'ease-in-out'
          }
        );
        animationRef.current.startTime = 0;
      } else if (!isAnimating && animationRef.current) {
        animationRef.current.cancel();
        animationRef.current = null;
      }
    },
    [isAnimating, reduceMotion]
  );
}

export type SkeletonElement = ReactElement<{
  children: ReactNode;