Looping animation

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

export function InboxHeader({
  syncing,
  latestMessageId
}: {
  syncing: boolean;
  latestMessageId: string;
}) {
  const reduceMotion = useReducedMotion();

  return (
    <header className='flex items-center justify-between border-b px-4 py-3'>
      <h2 className='font-semibold'>Inbox</h2>
      <div className='flex items-center gap-3'>
        {syncing && (
          <motion.span
            role='status'
            aria-label='Syncing'
            // repeat: Infinity spins for as long as the sync runs.
            animate={reduceMotion ? undefined : { rotate: 360 }}
            transition={{ duration: 0.8, ease: 'linear', repeat: Infinity }}
            className='size-4 rounded-full border-2 border-muted border-t-foreground'
          />
        )}
        <motion.span
          // A new message id remounts the bell, which replays the ring.
          key={latestMessageId}
          // repeat: 2 adds two runs to the first, so it rings three times.
          animate={reduceMotion ? undefined : { rotate: [0, 12, -12, 0] }}
          transition={{ duration: 0.6, ease: 'easeInOut', repeat: 2 }}
          className='origin-top'
          aria-hidden
        >
          <svg
            viewBox='0 0 24 24'
            fill='none'
            stroke='currentColor'
            strokeWidth={2}
            className='size-5'
          >
            <path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9' />
            <path d='M10.3 21a1.94 1.94 0 0 0 3.4 0' />
          </svg>
        </motion.span>
      </div>
    </header>
  );
}