loading-icon.tsx

import { useId } from 'react'

export function LoadingIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
  let id = useId()
  return (
    <svg
      viewBox="0 0 20 20"
      fill="none"
      aria-hidden="true"
      {...props}
    >
      <circle
        cx="10"
        cy="10"
        r="5.5"
        strokeLinejoin="round"
      />
      <path
        stroke={`url(#${id})`}
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M15.5 10a5.5 5.5 0 1 0-5.5 5.5"
      />
      <defs>
        <linearGradient
          id={id}
          x1="13"
          x2="9.5"
          y1="9"
          y2="15"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="currentColor" />
          <stop
            offset="1"
            stopColor="currentColor"
            stopOpacity="0"
          />
        </linearGradient>
      </defs>
    </svg>
  )
}