From 0407a2f9d8e6cfd149151eeeb23c20d72293493a Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 4 Sep 2024 16:52:34 +0000
Subject: [PATCH 1/3] test(site): make loading snapshots more predictable

Abstracts the Spinner component to control the display of the CircularProgress component. This allows us to make it static during Chromatic tests, making loading tests easier to visualize.
---
 site/src/components/Loader/Loader.tsx   |  4 ++--
 site/src/components/Spinner/Spinner.tsx | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 site/src/components/Spinner/Spinner.tsx

diff --git a/site/src/components/Loader/Loader.tsx b/site/src/components/Loader/Loader.tsx
index e62156955cd9f..1c202eed1445a 100644
--- a/site/src/components/Loader/Loader.tsx
+++ b/site/src/components/Loader/Loader.tsx
@@ -1,5 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import CircularProgress from "@mui/material/CircularProgress";
+import { Spinner } from "components/Spinner/Spinner";
 import type { FC, HTMLAttributes } from "react";
 
 interface LoaderProps extends HTMLAttributes<HTMLDivElement> {
@@ -18,7 +18,7 @@ export const Loader: FC<LoaderProps> = ({
 			data-testid="loader"
 			{...attrs}
 		>
-			<CircularProgress size={size} />
+			<Spinner aria-label="Loading..." size={size} />
 		</div>
 	);
 };
diff --git a/site/src/components/Spinner/Spinner.tsx b/site/src/components/Spinner/Spinner.tsx
new file mode 100644
index 0000000000000..edf782e392f78
--- /dev/null
+++ b/site/src/components/Spinner/Spinner.tsx
@@ -0,0 +1,20 @@
+import { CircularProgress, type CircularProgressProps } from "@mui/material";
+import type { FC } from "react";
+import isChromatic from "chromatic/isChromatic";
+
+/**
+ * Spinner component used to indicate loading states. This component abstracts
+ * the MUI CircularProgress to provide better control over its rendering,
+ * especially in snapshot tests with Chromatic.
+ */
+export const Spinner: FC<CircularProgressProps> = (props) => {
+	/**
+	 * During Chromatic snapshots, we render the spinner as determinate to make it
+	 * static without animations, using a deterministic value (75%).
+	 */
+	if (isChromatic()) {
+		props.variant = "determinate";
+		props.value = 75;
+	}
+	return <CircularProgress {...props} />;
+}

From fe2950c103752f16ca5b4de084ecbb4a6b79d993 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 4 Sep 2024 17:03:00 +0000
Subject: [PATCH 2/3] Fix fmt and lint

---
 site/src/components/Spinner/Spinner.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/site/src/components/Spinner/Spinner.tsx b/site/src/components/Spinner/Spinner.tsx
index edf782e392f78..5b20e2e54c5ef 100644
--- a/site/src/components/Spinner/Spinner.tsx
+++ b/site/src/components/Spinner/Spinner.tsx
@@ -1,6 +1,8 @@
-import { CircularProgress, type CircularProgressProps } from "@mui/material";
-import type { FC } from "react";
+import CircularProgress, {
+	type CircularProgressProps,
+} from "@mui/material/CircularProgress";
 import isChromatic from "chromatic/isChromatic";
+import type { FC } from "react";
 
 /**
  * Spinner component used to indicate loading states. This component abstracts
@@ -17,4 +19,4 @@ export const Spinner: FC<CircularProgressProps> = (props) => {
 		props.value = 75;
 	}
 	return <CircularProgress {...props} />;
-}
+};

From 2fc71f89b1b01d29057440664b9f43688de4d4f1 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 4 Sep 2024 17:53:22 +0000
Subject: [PATCH 3/3] Passing label as a prop

---
 site/src/components/Loader/Loader.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/site/src/components/Loader/Loader.tsx b/site/src/components/Loader/Loader.tsx
index 1c202eed1445a..589cbd72b2331 100644
--- a/site/src/components/Loader/Loader.tsx
+++ b/site/src/components/Loader/Loader.tsx
@@ -5,11 +5,16 @@ import type { FC, HTMLAttributes } from "react";
 interface LoaderProps extends HTMLAttributes<HTMLDivElement> {
 	fullscreen?: boolean;
 	size?: number;
+	/**
+	 * A label for the loader. This is used for accessibility purposes.
+	 */
+	label?: string;
 }
 
 export const Loader: FC<LoaderProps> = ({
 	fullscreen,
 	size = 26,
+	label = "Loading...",
 	...attrs
 }) => {
 	return (
@@ -18,7 +23,7 @@ export const Loader: FC<LoaderProps> = ({
 			data-testid="loader"
 			{...attrs}
 		>
-			<Spinner aria-label="Loading..." size={size} />
+			<Spinner aria-label={label} size={size} />
 		</div>
 	);
 };