Loading Spinner

import React, { useEffect, useRef } from "@rbxts/react";
import { useTheme } from "@robloxui/theme";

interface LoadingSpinnerProps {
  size?: number;
  color?: string;
  speed?: number;
}

export function LoadingSpinner({ size = 32, color, speed = 1 }: LoadingSpinnerProps) {
  const { colors } = useTheme();
  const frameRef = useRef<Frame>();

  useEffect(() => {
    const frame = frameRef.current;
    if (!frame) return;

    let angle = 0;
    const connection = game.GetService("RunService").Heartbeat.Connect((dt) => {
      angle = (angle + 360 * speed * dt) % 360;
      frame.Rotation = angle;
    });

    return () => connection.Disconnect();
  }, [speed]);

  return (
    <frame ref={frameRef} BackgroundTransparency={1} Size={new UDim2(0, size, 0, size)} AnchorPoint={new Vector2(0.5, 0.5)}>
      <imagelabel
        Image={"rbxassetid://spinner-arc"}
        Size={new UDim2(1, 0, 1, 0)}
        BackgroundTransparency={1}
        ImageColor3={color ? Color3.fromHex(color) : colors.primary}
      />
    </frame>
  );
}