From 4edd21ae9e30c60f73a4e22644074e22028c2d35 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Wed, 3 Jan 2024 13:29:04 -0300
Subject: [PATCH] fix(site): fix loading spinner on template version status
 badge (#11392)

---
 .../TemplateVersionStatusBadge.tsx                  | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx
index a3e7068e6b..19aba9ef2f 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx
@@ -1,9 +1,8 @@
 import { type TemplateVersion } from "api/typesGenerated";
 import { type FC, type ReactNode } from "react";
-import CircularProgress from "@mui/material/CircularProgress";
 import ErrorIcon from "@mui/icons-material/ErrorOutline";
 import CheckIcon from "@mui/icons-material/CheckOutlined";
-import { Pill, type PillType } from "components/Pill/Pill";
+import { Pill, PillSpinner, type PillType } from "components/Pill/Pill";
 
 interface TemplateVersionStatusBadgeProps {
   version: TemplateVersion;
@@ -20,10 +19,6 @@ export const TemplateVersionStatusBadge: FC<
   );
 };
 
-const LoadingIcon: FC = () => {
-  return <CircularProgress size={10} style={{ color: "#FFF" }} />;
-};
-
 export const getStatus = (
   version: TemplateVersion,
 ): {
@@ -36,19 +31,19 @@ export const getStatus = (
       return {
         type: "info",
         text: "Running",
-        icon: <LoadingIcon />,
+        icon: <PillSpinner />,
       };
     case "pending":
       return {
         type: "info",
         text: "Pending",
-        icon: <LoadingIcon />,
+        icon: <PillSpinner />,
       };
     case "canceling":
       return {
         type: "warning",
         text: "Canceling",
-        icon: <LoadingIcon />,
+        icon: <PillSpinner />,
       };
     case "canceled":
       return {