From 657e9e095a00b17db88052e77e1d643d035cce30 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Thu, 15 May 2025 18:57:00 +0000
Subject: [PATCH] chore: migrate spinner components

---
 site/src/components/Filter/SelectFilter.tsx   |  2 +-
 site/src/components/Loader/Loader.tsx         |  8 +++----
 .../components/deprecated/Spinner/Spinner.tsx | 24 -------------------
 .../pages/ChatPage/LanguageModelSelector.tsx  |  2 +-
 .../pages/WorkspacesPage/WorkspacesButton.tsx |  2 +-
 5 files changed, 7 insertions(+), 31 deletions(-)
 delete mode 100644 site/src/components/deprecated/Spinner/Spinner.tsx

diff --git a/site/src/components/Filter/SelectFilter.tsx b/site/src/components/Filter/SelectFilter.tsx
index 1b55cf2585806..1b8993a9713d3 100644
--- a/site/src/components/Filter/SelectFilter.tsx
+++ b/site/src/components/Filter/SelectFilter.tsx
@@ -108,7 +108,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
 						</div>
 					)
 				) : (
-					<Loader size={16} />
+					<Loader size="sm" />
 				)}
 			</SelectMenuContent>
 		</SelectMenu>
diff --git a/site/src/components/Loader/Loader.tsx b/site/src/components/Loader/Loader.tsx
index 0121b352eaeb1..ef590aecfbca0 100644
--- a/site/src/components/Loader/Loader.tsx
+++ b/site/src/components/Loader/Loader.tsx
@@ -1,10 +1,10 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import { Spinner } from "components/deprecated/Spinner/Spinner";
+import { Spinner } from "components/Spinner/Spinner";
 import type { FC, HTMLAttributes } from "react";
 
 interface LoaderProps extends HTMLAttributes<HTMLDivElement> {
 	fullscreen?: boolean;
-	size?: number;
+	size?: "sm" | "lg";
 	/**
 	 * A label for the loader. This is used for accessibility purposes.
 	 */
@@ -13,7 +13,7 @@ interface LoaderProps extends HTMLAttributes<HTMLDivElement> {
 
 export const Loader: FC<LoaderProps> = ({
 	fullscreen,
-	size = 26,
+	size = "lg",
 	label = "Loading...",
 	...attrs
 }) => {
@@ -23,7 +23,7 @@ export const Loader: FC<LoaderProps> = ({
 			data-testid="loader"
 			{...attrs}
 		>
-			<Spinner aria-label={label} size={size} />
+			<Spinner aria-label={label} size={size} loading={true} />
 		</div>
 	);
 };
diff --git a/site/src/components/deprecated/Spinner/Spinner.tsx b/site/src/components/deprecated/Spinner/Spinner.tsx
deleted file mode 100644
index 35fc7e9e177b0..0000000000000
--- a/site/src/components/deprecated/Spinner/Spinner.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import CircularProgress, {
-	type CircularProgressProps,
-} from "@mui/material/CircularProgress";
-import isChromatic from "chromatic/isChromatic";
-import type { FC } from "react";
-
-/**
- * Spinner component used to indicate loading states. This component abstracts
- * the MUI CircularProgress to provide better control over its rendering,
- * especially in snapshot tests with Chromatic.
- *
- * @deprecated prefer `components.Spinner`
- */
-export const Spinner: FC<CircularProgressProps> = (props) => {
-	/**
-	 * During Chromatic snapshots, we render the spinner as determinate to make it
-	 * static without animations, using a deterministic value (75%).
-	 */
-	if (isChromatic()) {
-		props.variant = "determinate";
-		props.value = 75;
-	}
-	return <CircularProgress {...props} />;
-};
diff --git a/site/src/pages/ChatPage/LanguageModelSelector.tsx b/site/src/pages/ChatPage/LanguageModelSelector.tsx
index 2170be22b3196..da56ad6839491 100644
--- a/site/src/pages/ChatPage/LanguageModelSelector.tsx
+++ b/site/src/pages/ChatPage/LanguageModelSelector.tsx
@@ -20,7 +20,7 @@ export const LanguageModelSelector: FC = () => {
 	} = useQuery(deploymentLanguageModels());
 
 	if (isLoading) {
-		return <Loader size={14} />;
+		return <Loader size="sm" />;
 	}
 
 	if (error || !languageModelConfig) {
diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
index 65bf7de53536e..5e582d4e6d6be 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
@@ -85,7 +85,7 @@ export const WorkspacesButton: FC<WorkspacesButtonProps> = ({
 					}}
 				>
 					{templatesFetchStatus === "loading" ? (
-						<Loader size={14} />
+						<Loader size="sm" />
 					) : (
 						<>
 							{processed.map((template) => (