fix(site): fix pill spinner size (coder#11368)

BrunoQuaresma · web-flow · commit a1341ee9acd7 · 2024-01-02T15:05:20.000-03:00
diff --git a/site/src/components/Pill/Pill.stories.tsx b/site/src/components/Pill/Pill.stories.tsx
@@ -1,20 +1,19 @@
-import { Pill } from "./Pill";
+import { Pill, PillSpinner } from "./Pill";
 import type { Meta, StoryObj } from "@storybook/react";
 import InfoOutlined from "@mui/icons-material/InfoOutlined";
 
 const meta: Meta<typeof Pill> = {
   title: "components/Pill",
   component: Pill,
+  args: {
+    children: "Default",
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof Pill>;
 
-export const Default: Story = {
-  args: {
-    children: "Default",
-  },
-};
+export const Default: Story = {};
 
 export const Danger: Story = {
   args: {
@@ -72,3 +71,12 @@ export const WithIcon: Story = {
     icon: <InfoOutlined />,
   },
 };
+
+export const WithSpinner: Story = {
+  args: {
+    icon: <PillSpinner />,
+  },
+  parameters: {
+    chromatic: { delay: 700 },
+  },
+};
diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
@@ -7,6 +7,9 @@ import {
 } from "react";
 import { useTheme, type Interpolation, type Theme } from "@emotion/react";
 import type { ThemeRole } from "theme/experimental";
+import CircularProgress, {
+  CircularProgressProps,
+} from "@mui/material/CircularProgress";
 
 export type PillType = ThemeRole | keyof typeof themeOverrides;
 
@@ -81,3 +84,19 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
     );
   },
 );
+
+export const PillSpinner = (props: CircularProgressProps) => {
+  return (
+    <CircularProgress
+      size={PILL_ICON_SIZE}
+      css={(theme) => ({
+        color: theme.experimental.l1.text,
+        // It is necessary to align it with the MUI Icons internal padding
+        "& svg": {
+          transform: "scale(.75)",
+        },
+      })}
+      {...props}
+    />
+  );
+};
diff --git a/site/src/utils/workspace.tsx b/site/src/utils/workspace.tsx
@@ -1,4 +1,3 @@
-import CircularProgress from "@mui/material/CircularProgress";
 import ErrorIcon from "@mui/icons-material/ErrorOutline";
 import StopIcon from "@mui/icons-material/StopOutlined";
 import PlayIcon from "@mui/icons-material/PlayArrowOutlined";
@@ -8,9 +7,9 @@ import duration from "dayjs/plugin/duration";
 import minMax from "dayjs/plugin/minMax";
 import utc from "dayjs/plugin/utc";
 import { type Theme } from "@emotion/react";
-import { type FC } from "react";
 import semver from "semver";
 import type * as TypesGen from "api/typesGenerated";
+import { PillSpinner } from "components/Pill/Pill";
 
 dayjs.extend(duration);
 dayjs.extend(utc);
@@ -29,15 +28,6 @@ const DisplayAgentVersionLanguage = {
   unknown: "Unknown",
 };
 
-const LoadingIcon: FC = () => {
-  return (
-    <CircularProgress
-      size={10}
-      css={(theme) => ({ color: theme.experimental.l1.text })}
-    />
-  );
-};
-
 export const getDisplayWorkspaceBuildStatus = (
   theme: Theme,
   build: TypesGen.WorkspaceBuild,
@@ -185,7 +175,7 @@ export const getDisplayWorkspaceStatus = (
     case undefined:
       return {
         text: "Loading",
-        icon: <LoadingIcon />,
+        icon: <PillSpinner />,
       } as const;
     case "running":
       return {
@@ -197,13 +187,13 @@ export const getDisplayWorkspaceStatus = (
       return {
         type: "active",
         text: "Starting",
-        icon: <LoadingIcon />,
+        icon: <PillSpinner />,
       } as const;
     case "stopping":
       return {
         type: "notice",
         text: "Stopping",
-        icon: <LoadingIcon />,
+        icon: <PillSpinner />,
       } as const;
     case "stopped":
       return {
@@ -215,7 +205,7 @@ export const getDisplayWorkspaceStatus = (
       return {
         type: "danger",
         text: "Deleting",
-        icon: <LoadingIcon />,
+        icon: <PillSpinner />,
       } as const;
     case "deleted":
       return {
@@ -227,7 +217,7 @@ export const getDisplayWorkspaceStatus = (
       return {
         type: "notice",
         text: "Canceling",
-        icon: <LoadingIcon />,
+        icon: <PillSpinner />,
       } as const;
     case "canceled":
       return {
