design-system/spinner.tsx

Reusable SVG spinner component for loading states in the design system.

// Source: https://github.com/suyoumo/ClawProBench | License: Apache-2.0 | Copyright You must retain, in the Source form of any Derivative Works
// Provided via justclaw.it.com; keep this notice with the code.
/**
 * Spinner
 *
 * The single loading spinner used across the app (inside Button's `loading`
 * state and in inline status rows like the in-chat OAuth gate). Stroke-based
 * ring + rounded-cap arc — cleaner than a filled quarter-glyph. Uses the
 * `v2-spin` keyframe (0.8s linear), which is suppressed under
 * prefers-reduced-motion.
 *
 * Props
 *   className  extra classes (e.g. sizing / color); defaults to h-4 w-4.
 */
import { cn } from "../utils/cn";

export function Spinner({ className = "" } = {}) {
  return (
    <svg
      className={cn("v2-spin shrink-0", className || "h-4

... (truncated -- full source via MCP)