refactor: clean up existing code

Parkreiner · Parkreiner · commit 8da41dff66c8 · 2025-02-07T15:30:42.000Z
diff --git a/site/src/components/Spinner/Spinner.tsx b/site/src/components/Spinner/Spinner.tsx
@@ -6,10 +6,10 @@
 
 import isChromatic from "chromatic/isChromatic";
 import { type VariantProps, cva } from "class-variance-authority";
-import type { ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 import { cn } from "utils/cn";
 
-const leaves = 8;
+const SPINNER_LEAF_COUNT = 8;
 
 const spinnerVariants = cva("", {
 	variants: {
@@ -23,19 +23,25 @@ const spinnerVariants = cva("", {
 	},
 });
 
-type SpinnerProps = React.SVGProps<SVGSVGElement> &
-	VariantProps<typeof spinnerVariants> & {
-		children?: ReactNode;
-		loading?: boolean;
-	};
+type SpinnerProps = Readonly<
+	React.SVGProps<SVGSVGElement> &
+		VariantProps<typeof spinnerVariants> & {
+			children?: ReactNode;
+			loading?: boolean;
+			unmountedWhileLoading?: boolean;
+			spinnerStartDelayMs?: number;
+		}
+>;
 
-export function Spinner({
+const leavesIterable = Array.from({ length: SPINNER_LEAF_COUNT }, (_, i) => i);
+
+export const Spinner: FC<SpinnerProps> = ({
 	className,
 	size,
 	loading,
 	children,
 	...props
-}: SpinnerProps) {
+}) => {
 	if (!loading) {
 		return children;
 	}
@@ -45,33 +51,29 @@ export function Spinner({
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 			fill="currentColor"
-			className={cn(spinnerVariants({ size, className }))}
+			className={cn(className, spinnerVariants({ size }))}
 			{...props}
 		>
 			<title>Loading spinner</title>
-			{[...Array(leaves)].map((_, i) => {
-				const rotation = i * (360 / leaves);
-
-				return (
-					<rect
-						key={i}
-						x="10.9"
-						y="2"
-						width="2"
-						height="5.5"
-						rx="1"
-						// 0.8 = leaves * 0.1
-						className={
-							isChromatic() ? "" : "animate-[loading_0.8s_ease-in-out_infinite]"
-						}
-						style={{
-							transform: `rotate(${rotation}deg)`,
-							transformOrigin: "center",
-							animationDelay: `${-i * 0.1}s`,
-						}}
-					/>
-				);
-			})}
+			{leavesIterable.map((leafIndex) => (
+				<rect
+					key={leafIndex}
+					x="10.9"
+					y="2"
+					width="2"
+					height="5.5"
+					rx="1"
+					// 0.8 = leaves * 0.1
+					className={
+						isChromatic() ? "" : "animate-[loading_0.8s_ease-in-out_infinite]"
+					}
+					style={{
+						transform: `rotate(${leafIndex * (360 / SPINNER_LEAF_COUNT)}deg)`,
+						transformOrigin: "center",
+						animationDelay: `${-leafIndex * 0.1}s`,
+					}}
+				/>
+			))}
 		</svg>
 	);
-}
+};
