chore: migrate spinner components (#17866)

site/src/components/Filter/SelectFilter.tsx

@@ -108,7 +108,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
 						</div>
 					)
 				) : (
-					<Loader size={16} />
+					<Loader size="sm" />
 				)}
 			</SelectMenuContent>
 		</SelectMenu>

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>
 	);
 };

site/src/components/deprecated/Spinner/Spinner.tsx

@@ -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} />;
-};

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) {

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) => (