chore: add Spinner component

BrunoQuaresma · BrunoQuaresma · commit 2fc574815115 · 2025-01-02T17:29:11.000Z
diff --git a/site/src/components/Spinner/Spinner.stories.tsx b/site/src/components/Spinner/Spinner.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Spinner } from "./Spinner";
+import { PlusIcon } from "lucide-react";
+
+const meta: Meta<typeof Spinner> = {
+	title: "components/Spinner",
+	component: Spinner,
+	args: {
+		children: <PlusIcon className="size-icon-lg" />,
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+
+export const Idle: Story = {};
+
+export const Loading: Story = {
+	args: { loading: true },
+};
diff --git a/site/src/components/Spinner/Spinner.tsx b/site/src/components/Spinner/Spinner.tsx
@@ -0,0 +1,75 @@
+/**
+ * This component was inspired by
+ * https://www.radix-ui.com/themes/docs/components/spinner and developed using
+ * https://v0.dev/ help.
+ */
+
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ReactNode } from "react";
+import { cn } from "utils/cn";
+
+const leaves = 8;
+
+const spinnerVariants = cva("", {
+	variants: {
+		size: {
+			lg: "size-icon-lg",
+			sm: "size-icon-sm",
+		},
+	},
+	defaultVariants: {
+		size: "lg",
+	},
+});
+
+type SpinnerProps = React.SVGProps<SVGSVGElement> &
+	VariantProps<typeof spinnerVariants> & {
+		children?: ReactNode;
+		loading?: boolean;
+	};
+
+export function Spinner({
+	className,
+	size,
+	loading,
+	children,
+	...props
+}: SpinnerProps) {
+	if (!loading) {
+		return children;
+	}
+
+	return (
+		<svg
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="currentColor"
+			className={cn(spinnerVariants({ size, className }))}
+			{...props}
+		>
+			<title>Loading spinner</title>
+			{[...Array(leaves)].map((_, i) => {
+				const rotation = i * (360 / leaves);
+
+				return (
+					<rect
+						// biome-ignore lint/suspicious/noArrayIndexKey: This is a static array
+						key={i}
+						x="11.5"
+						y="3"
+						width="1.5"
+						height="4"
+						rx="0.5"
+						// 0.8 = leaves * 0.1
+						className="animate-[loading_0.8s_ease-in-out_infinite]"
+						style={{
+							transform: `rotate(${rotation}deg)`,
+							transformOrigin: "center",
+							animationDelay: `${-i * 0.1}s`,
+						}}
+					/>
+				);
+			})}
+		</svg>
+	);
+}
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
@@ -58,6 +58,13 @@ module.exports = {
 					5: "hsl(var(--chart-5))",
 				},
 			},
+			keyframes: {
+				loading: {
+					"0%": { opacity: 0.85 },
+					"50%": { opacity: 0.25 },
+					"100%": { opacity: 0.25 },
+				},
+			},
 		},
 	},
 	plugins: [require("tailwindcss-animate")],
