test(site): make loading snapshots more predictable (#14564)

BrunoQuaresma · web-flow · commit c3f0db3671b1 · 2024-09-04T15:20:41.000-03:00
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.
diff --git a/site/src/components/Loader/Loader.tsx b/site/src/components/Loader/Loader.tsx
@@ -1,15 +1,20 @@
 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> {
 	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}
 		>
-			<CircularProgress size={size} />
+			<Spinner aria-label={label} size={size} />
 		</div>
 	);
 };
diff --git a/site/src/components/Spinner/Spinner.tsx b/site/src/components/Spinner/Spinner.tsx
@@ -0,0 +1,22 @@
+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
+ * 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} />;
+};
