From 224db483d703e58b4de29b67e3b0ab46c6a646d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kayla=20=E3=81=AF=E3=81=AA?= <mckayla@hey.com>
Date: Thu, 9 Apr 2026 12:02:26 -0400
Subject: [PATCH] refactor(site): remove mui from a few components (#24125)

---
 .../components/Avatar/AvatarDataSkeleton.tsx  |  5 ++-
 site/src/components/Latency/Latency.tsx       |  4 +-
 site/src/components/Skeleton/Skeleton.tsx     | 40 ++++++++++++++++---
 site/src/components/StackLabel/StackLabel.tsx | 12 +++---
 .../components/TableToolbar/TableToolbar.tsx  |  2 +-
 .../pages/TemplatesPage/TemplatesPageView.tsx |  6 +--
 6 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/site/src/components/Avatar/AvatarDataSkeleton.tsx b/site/src/components/Avatar/AvatarDataSkeleton.tsx
index 1c12749888..f7ba038a9d 100644
--- a/site/src/components/Avatar/AvatarDataSkeleton.tsx
+++ b/site/src/components/Avatar/AvatarDataSkeleton.tsx
@@ -1,9 +1,10 @@
-import Skeleton from "@mui/material/Skeleton";
 import type { FC } from "react";
+import { Skeleton } from "#/components/Skeleton/Skeleton";
+
 export const AvatarDataSkeleton: FC = () => {
 	return (
 		<div className="flex items-center gap-3 w-full">
-			<Skeleton variant="rectangular" className="size-10 rounded-sm shrink-0" />
+			<Skeleton className="size-10 rounded-sm shrink-0" />
 
 			<div className="flex flex-col w-full">
 				<Skeleton variant="text" width={100} />
diff --git a/site/src/components/Latency/Latency.tsx b/site/src/components/Latency/Latency.tsx
index 0e26a08f23..6d839c613c 100644
--- a/site/src/components/Latency/Latency.tsx
+++ b/site/src/components/Latency/Latency.tsx
@@ -1,7 +1,7 @@
-import CircularProgress from "@mui/material/CircularProgress";
 import { CircleHelpIcon } from "lucide-react";
 import type { FC } from "react";
 import { Abbr } from "#/components/Abbr/Abbr";
+import { Spinner } from "#/components/Spinner/Spinner";
 import {
 	Tooltip,
 	TooltipContent,
@@ -38,7 +38,7 @@ export const Latency: FC<LatencyProps> = ({
 							className,
 						)}
 					>
-						<CircularProgress className={cn("!size-icon-xs", latencyColor)} />
+						<Spinner loading className={cn("!size-icon-xs", latencyColor)} />
 					</div>
 				</TooltipTrigger>
 				<TooltipContent side="bottom">Loading latency...</TooltipContent>
diff --git a/site/src/components/Skeleton/Skeleton.tsx b/site/src/components/Skeleton/Skeleton.tsx
index e4c983ff5e..729a45a835 100644
--- a/site/src/components/Skeleton/Skeleton.tsx
+++ b/site/src/components/Skeleton/Skeleton.tsx
@@ -1,17 +1,45 @@
 /**
- * Copied from shadc/ui on 06/20/2025
+ * Copied from shadcn/ui on 06/20/2025.
  * @see {@link https://ui.shadcn.com/docs/components/skeleton}
  */
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "#/utils/cn";
 
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+const skeletonVariants = cva("bg-surface-tertiary animate-pulse", {
+	variants: {
+		variant: {
+			default: "rounded-md",
+			text: "rounded-full h-2 my-1",
+			circular: "rounded-full",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+type SkeletonProps = React.ComponentProps<"div"> &
+	VariantProps<typeof skeletonVariants> & {
+		/** Width in pixels (number) or any CSS value (string). */
+		width?: number | string;
+		/** Height in pixels (number) or any CSS value (string). */
+		height?: number | string;
+	};
+
+export const Skeleton: React.FC<SkeletonProps> = ({
+	className,
+	variant,
+	width,
+	height,
+	style,
+	...props
+}) => {
 	return (
 		<div
 			data-slot="skeleton"
-			className={cn("bg-surface-tertiary animate-pulse rounded-md", className)}
+			className={cn(skeletonVariants({ variant }), className)}
+			style={{ width, height, ...style }}
 			{...props}
 		/>
 	);
-}
-
-export { Skeleton };
+};
diff --git a/site/src/components/StackLabel/StackLabel.tsx b/site/src/components/StackLabel/StackLabel.tsx
index 239a506011..ad33fecb57 100644
--- a/site/src/components/StackLabel/StackLabel.tsx
+++ b/site/src/components/StackLabel/StackLabel.tsx
@@ -1,6 +1,3 @@
-import FormHelperText, {
-	type FormHelperTextProps,
-} from "@mui/material/FormHelperText";
 import type { ComponentProps, FC } from "react";
 import { Stack } from "#/components/Stack/Stack";
 import { cn } from "#/utils/cn";
@@ -23,13 +20,16 @@ export const StackLabel: FC<ComponentProps<typeof Stack>> = ({
 	);
 };
 
-export const StackLabelHelperText: FC<FormHelperTextProps> = ({
+export const StackLabelHelperText: FC<ComponentProps<"p">> = ({
 	className,
 	...props
 }) => {
 	return (
-		<FormHelperText
-			className={cn("mt-0 [&_strong]:text-content-primary", className)}
+		<p
+			className={cn(
+				"mt-0 text-xs text-content-secondary leading-[1.66] [&_strong]:text-content-primary",
+				className,
+			)}
 			{...props}
 		/>
 	);
diff --git a/site/src/components/TableToolbar/TableToolbar.tsx b/site/src/components/TableToolbar/TableToolbar.tsx
index 95b2945e05..dc966bda35 100644
--- a/site/src/components/TableToolbar/TableToolbar.tsx
+++ b/site/src/components/TableToolbar/TableToolbar.tsx
@@ -1,5 +1,5 @@
-import Skeleton from "@mui/material/Skeleton";
 import type { FC, PropsWithChildren } from "react";
+import { Skeleton } from "#/components/Skeleton/Skeleton";
 export const TableToolbar: FC<PropsWithChildren> = ({ children }) => {
 	return (
 		<div className="text-sm mb-2 mt-0 h-9 text-content-secondary flex items-center [&_strong]:text-content-primary">
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
index 3785f4dcc1..4408a79311 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Skeleton from "@mui/material/Skeleton";
 import { ArrowRightIcon, PlusIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link as RouterLink, useNavigate } from "react-router";
@@ -26,6 +25,7 @@ import {
 	PageHeaderSubtitle,
 	PageHeaderTitle,
 } from "#/components/PageHeader/PageHeader";
+import { Skeleton } from "#/components/Skeleton/Skeleton";
 import { Stack } from "#/components/Stack/Stack";
 import {
 	Table,
@@ -290,9 +290,7 @@ const TableLoader: FC = () => {
 		<TableLoaderSkeleton>
 			<TableRowSkeleton>
 				<TableCell>
-					<div className="flex items-center gap-2">
-						<AvatarDataSkeleton />
-					</div>
+					<AvatarDataSkeleton />
 				</TableCell>
 				<TableCell>
 					<Skeleton variant="text" width="25%" />