Math Curve Loader

1/* eslint-disable react-refresh/only-export-components */
2import * as React from 'react'
3import { cva, type VariantProps } from 'class-variance-authority'
4import { cn } from '@/lib/utils'
5import { ErrorBoundary } from '@/components/ErrorBoundary'
6import {
7  buildPath,
8  getPoint,
9  getAngle,
10  getDetailScale,
11  getCurvePulseDuration,
12  type LoaderCurveKey,
13} from '@/lib/math-curves'
14 
15const mathCurveLoaderVariants = cva('', {
16  variants: {
17    size: {
18      xs: 'w-6 h-6',
19      sm: 'w-8 h-8',
20      md: 'w-12 h-12',
21      lg: 'w-16 h-16',
22      xl: 'w-24 h-24',
23    },
24  },
25  defaultVariants: {
26    size: 'md',
27  },
28})
29 
30const SPEED_DURATION: Record<string, number> = {
31  slow: 9000,
32  normal: 5500,
33  fast: 3000,
34}
35 
36export interface MathCurveLoaderProps
37  extends React.SVGAttributes<SVGSVGElement>,
38    VariantProps<typeof mathCurveLoaderVariants> {
39  curve?: LoaderCurveKey
40  speed?: 'slow' | 'normal' | 'fast'
41  trackColor?: string
42  headColor?: string
43  strokeWidth?: number
44  headSize?: number
45}
46 
47const MathCurveLoader = React.forwardRef<SVGSVGElement, MathCurveLoaderProps>(
48  (
49    {
50      className,
51      size,
52      curve = 'rose',
53      speed = 'normal',
54      trackColor,
55      headColor,
56      strokeWidth = 4,
57      headSize = 8,
58      'aria-label': ariaLabel = 'Loading',
59      ...props
60    },
61    ref
62  ) => {
63    const pathRef = React.useRef<SVGPathElement>(null)
64    const rectRef = React.useRef<SVGRectElement>(null)
65    const rafRef = React.useRef<number>(0)
66    const startTimeRef = React.useRef<number>(performance.now())
67 
68    const durationMs = SPEED_DURATION[speed] ?? SPEED_DURATION.normal
69 
70    // Rebuild static track path when curve changes
71    const trackPath = React.useMemo(() => buildPath(curve, 1.0), [curve])
72 
73    React.useEffect(() => {
74      startTimeRef.current = performance.now()
75 
76      const tick = () => {
77        const now = performance.now()
78        const elapsed = (now - startTimeRef.current) % durationMs
79        const progress = elapsed / durationMs
80        const detailScale = getDetailScale(now, getCurvePulseDuration(curve))
81 
82        const { x, y } = getPoint(curve, progress, detailScale)
83        const angle = getAngle(curve, progress, detailScale)
84 
85        // Update track path with breathing detail scale
86        if (pathRef.current) {
87          pathRef.current.setAttribute('d', buildPath(curve, detailScale))
88        }
89 
90        // Update head rect position and rotation
91        if (rectRef.current) {
92          const cx = x
93// … truncated