feat: migrate <Loader /> component (#21996)

This pull-request migrates the MUI classes and imports out of `<Loader
/>` component.

site/src/components/Loader/Loader.tsx

@@ -1,6 +1,6 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import { Spinner } from "components/Spinner/Spinner";
 import type { FC, HTMLAttributes } from "react";
+import { cn } from "utils/cn";
 
 interface LoaderProps extends HTMLAttributes<HTMLDivElement> {
 	fullscreen?: boolean;
@@ -15,36 +15,20 @@ export const Loader: FC<LoaderProps> = ({
 	fullscreen,
 	size = "lg",
 	label = "Loading...",
+	className,
 	...attrs
 }) => {
 	return (
 		<div
-			css={fullscreen ? styles.fullscreen : styles.inline}
 			data-testid="loader"
 			{...attrs}
+			className={cn(
+				"flex items-center justify-center",
+				fullscreen ? "absolute inset-0 bg-surface-primary" : "w-full p-8",
+				className,
+			)}
 		>
 			<Spinner aria-label={label} size={size} loading={true} />
 		</div>
 	);
 };
-
-const styles = {
-	inline: {
-		padding: 32,
-		width: "100%",
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-	},
-	fullscreen: (theme) => ({
-		position: "absolute",
-		top: "0",
-		left: "0",
-		right: "0",
-		bottom: "0",
-		display: "flex",
-		justifyContent: "center",
-		alignItems: "center",
-		background: theme.palette.background.default,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;