Lottie animation

import { useEffect, useRef } from 'react';
import { useReducedMotion } from 'motion/react';

export function SuccessCheck() {
  const ref = useRef<HTMLDivElement>(null);
  const reduceMotion = useReducedMotion();

  useEffect(() => {
    let animation: { destroy(): void } | undefined;
    let cancelled = false;
    // Loaded on demand (npm install lottie-web), so the player stays out of
    // the main bundle.
    import('lottie-web').then(({ default: lottie }) => {
      if (cancelled || !ref.current) return;
      const item = lottie.loadAnimation({
        container: ref.current,
        renderer: 'svg',
        loop: false,
        autoplay: !reduceMotion,
        path: '/animations/success.json'
      });
      // Reduced motion: skip straight to the finished checkmark.
      if (reduceMotion) {
        item.addEventListener('DOMLoaded', () =>
          item.goToAndStop(item.totalFrames - 1, true)
        );
      }
      animation = item;
    });
    return () => {
      cancelled = true;
      animation?.destroy();
    };
  }, [reduceMotion]);

  return (
    <div
      ref={ref}
      role='img'
      aria-label='Order confirmed'
      className='size-24'
    />
  );
}