chore: migrate spinner components (#17866)

BrunoQuaresma · web-flow · commit ea63d27e4543 · 2025-05-15T22:29:58.000-03:00
diff --git 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
@@ -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
diff --git 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
@@ -85,7 +85,7 @@ export const WorkspacesButton: FC<WorkspacesButtonProps> = ({
 					}}
 				>
 					{templatesFetchStatus === "loading" ? (
-						<Loader size={14} />
+						<Loader size="sm" />
 					) : (
 						<>
 							{processed.map((template) => (

Original file line number	Diff line number	Diff line change
`@@ -108,7 +108,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({`
`108`	`108`	`</div>`
`109`	`109`	`)`
`110`	`110`	`) : (`
`111`		`- <Loader size={16} />`
	`111`	`+ <Loader size="sm" />`
`112`	`112`	`)}`
`113`	`113`	`</SelectMenuContent>`
`114`	`114`	`</SelectMenu>`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ export const LanguageModelSelector: FC = () => {`
`20`	`20`	`} = useQuery(deploymentLanguageModels());`
`21`	`21`
`22`	`22`	`if (isLoading) {`
`23`		`- return <Loader size={14} />;`
	`23`	`+ return <Loader size="sm" />;`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`if (error \|\| !languageModelConfig) {`
Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,7 @@ export const WorkspacesButton: FC<WorkspacesButtonProps> = ({`
`85`	`85`	`}}`
`86`	`86`	`>`
`87`	`87`	`{templatesFetchStatus === "loading" ? (`
`88`		`- <Loader size={14} />`
	`88`	`+ <Loader size="sm" />`
`89`	`89`	`) : (`
`90`	`90`	`<>`
`91`	`91`	`{processed.map((template) => (`