Socrates/apps/web/components/editor/Spinner.tsx

// Spinner — a small, polished SVG ring used everywhere the UI needs to
// signal "working." Two stacked circles: a faint full ring (track) and a
// shorter accent arc on top, with the arc rotating around the center.
// The dasharray + animation give a smooth motion that doesn't depend on
// CSS-only border tricks (which look chunky at small sizes).

"use client";

interface SpinnerProps {
  /** Pixel size; defaults to 14 (matches sidebar button glyph metrics). */
  size?: number;
  /** Accent stroke color; defaults to `currentColor` so the spinner picks
   *  up the surrounding text color. */
  color?: string;
  /** Track stroke color; defaults to a faint border tone. */
  trackColor?: string;
  /** Stroke width in SVG units (viewBox 24×24). 2.5 reads cleanly at 14px. */
  strokeWidth?: number;
  className?: string;
  title?: string;
}

export function Spinner({
  size = 14,
  color = "currentColor",
  trackColor = "rgba(0,0,0,0.14)",
  strokeWidth = 2.5,
  className,
  title,
}: SpinnerProps) {
  return (
    <svg
      className={`spinner ${className ?? ""}`}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      role={title ? "img" : "presentation"}
      aria-label={title}
      aria-hidden={title ? undefined : true}
    >
      {/* Track */}
      <circle
        cx="12"
        cy="12"
        r="9"
        fill="none"
        stroke={trackColor}
        strokeWidth={strokeWidth}
      />
      {/* Animated arc — strokeDasharray ~= 25% of the circumference (2π·9 ≈ 56.5);
       * we use 14 56.5-14 = 14 / 42.5 to draw a 14-unit arc. */}
      <circle
        cx="12"
        cy="12"
        r="9"
        fill="none"
        stroke={color}
        strokeWidth={strokeWidth}
        strokeLinecap="round"
        strokeDasharray="14 42.5"
        transform="rotate(-90 12 12)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          from="-90 12 12"
          to="270 12 12"
          dur="0.85s"
          repeatCount="indefinite"
        />
      </circle>
    </svg>
  );
}