chore: add stories for `Loader` (#12445)

site/src/components/ErrorBoundary/RuntimeErrorState.tsx

@@ -7,7 +7,7 @@ import { Helmet } from "react-helmet-async";
 import type { BuildInfoResponse } from "api/typesGenerated";
 import { CopyButton } from "components/CopyButton/CopyButton";
 import { CoderIcon } from "components/Icons/CoderIcon";
-import { FullScreenLoader } from "components/Loader/FullScreenLoader";
+import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
 import { Stack } from "components/Stack/Stack";
 
@@ -50,7 +50,9 @@ export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
       <Helmet>
         <title>Something went wrong...</title>
       </Helmet>
-      {!checkingError ? (
+      {checkingError ? (
+        <Loader fullscreen />
+      ) : (
         <Margins css={styles.root}>
           <div css={{ width: "100%" }}>
             <CoderIcon css={styles.logo} />
@@ -109,8 +111,6 @@ export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
             )}
           </div>
         </Margins>
-      ) : (
-        <FullScreenLoader />
       )}
     </>
   );

site/src/components/Loader/FullScreenLoader.tsx

@@ -1,23 +0,0 @@
-import CircularProgress from "@mui/material/CircularProgress";
-import type { FC } from "react";
-
-export const FullScreenLoader: FC = () => {
-  return (
-    <div
-      css={(theme) => ({
-        position: "absolute",
-        top: "0",
-        left: "0",
-        right: "0",
-        bottom: "0",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        background: theme.palette.background.default,
-      })}
-      data-testid="loader"
-    >
-      <CircularProgress />
-    </div>
-  );
-};

site/src/components/Loader/Loader.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Loader } from "./Loader";
+
+const meta: Meta<typeof Loader> = {
+  title: "components/Loader",
+  component: Loader,
+};
+
+export default meta;
+type Story = StoryObj<typeof Loader>;
+
+export const Example: Story = {};
+
+export const Fullscreen: Story = {
+  args: {
+    fullscreen: true,
+  },
+};

site/src/components/Loader/Loader.tsx

@@ -1,25 +1,45 @@
+import type { Interpolation, Theme } from "@emotion/react";
 import CircularProgress from "@mui/material/CircularProgress";
 import type { FC, HTMLAttributes } from "react";
 
 interface LoaderProps extends HTMLAttributes<HTMLDivElement> {
+  fullscreen?: boolean;
   size?: number;
 }
 
-export const Loader: FC<LoaderProps> = ({ size = 26, ...attrs }) => {
+export const Loader: FC<LoaderProps> = ({
+  fullscreen,
+  size = 26,
+  ...attrs
+}) => {
   return (
     <div
-      css={{
-        padding: 32,
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
+      css={fullscreen ? styles.fullscreen : styles.inline}
       data-testid="loader"
-      data-chromatic="ignore"
       {...attrs}
     >
       <CircularProgress size={size} />
     </div>
   );
 };
+
+const styles = {
+  inline: {
+    padding: 32,
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  fullscreen: (theme) => ({
+    position: "absolute",
+    top: "0",
+    left: "0",
+    right: "0",
+    bottom: "0",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    background: theme.palette.background.default,
+  }),
+} satisfies Record<string, Interpolation<Theme>>;

site/src/contexts/auth/RequireAuth.tsx

@@ -2,7 +2,7 @@ import axios from "axios";
 import { type FC, useEffect } from "react";
 import { Outlet, Navigate, useLocation } from "react-router-dom";
 import { isApiError } from "api/errors";
-import { FullScreenLoader } from "components/Loader/FullScreenLoader";
+import { Loader } from "components/Loader/Loader";
 import { ProxyProvider } from "contexts/ProxyContext";
 import { DashboardProvider } from "modules/dashboard/DashboardProvider";
 import { embedRedirect } from "utils/redirect";
@@ -43,7 +43,7 @@ export const RequireAuth: FC = () => {
   }, [isLoading, isSigningOut, isSignedIn, signOut]);
 
   if (isLoading || isSigningOut) {
-    return <FullScreenLoader />;
+    return <Loader fullscreen />;
   }
 
   if (isSignedOut) {

site/src/modules/dashboard/DashboardProvider.tsx

@@ -17,7 +17,7 @@ import type {
   Experiments,
 } from "api/typesGenerated";
 import { displayError } from "components/GlobalSnackbar/utils";
-import { FullScreenLoader } from "components/Loader/FullScreenLoader";
+import { Loader } from "components/Loader/Loader";
 import { hslToHex, isHexColor, isHslColor } from "utils/colors";
 
 interface Appearance {
@@ -78,7 +78,7 @@ export const DashboardProvider: FC<PropsWithChildren> = ({ children }) => {
   }, []);
 
   if (isLoading) {
-    return <FullScreenLoader />;
+    return <Loader fullscreen />;
   }
 
   return (

site/src/pages/CliAuthPage/CliAuthPageView.tsx

@@ -3,7 +3,7 @@ import { visuallyHidden } from "@mui/utils";
 import type { FC } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import { CodeExample } from "components/CodeExample/CodeExample";
-import { FullScreenLoader } from "components/Loader/FullScreenLoader";
+import { Loader } from "components/Loader/Loader";
 import { SignInLayout } from "components/SignInLayout/SignInLayout";
 import { Welcome } from "components/Welcome/Welcome";
 
@@ -15,7 +15,7 @@ const VISUALLY_HIDDEN_SPACE = " ";
 
 export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
   if (!sessionToken) {
-    return <FullScreenLoader />;
+    return <Loader fullscreen />;
   }
 
   return (

site/src/pages/SetupPage/SetupPage.tsx

@@ -3,7 +3,7 @@ import { Helmet } from "react-helmet-async";
 import { useMutation } from "react-query";
 import { Navigate, useNavigate } from "react-router-dom";
 import { createFirstUser } from "api/queries/users";
-import { FullScreenLoader } from "components/Loader/FullScreenLoader";
+import { Loader } from "components/Loader/Loader";
 import { useAuth } from "contexts/auth/useAuth";
 import { pageTitle } from "utils/page";
 import { SetupPageView } from "./SetupPageView";
@@ -21,7 +21,7 @@ export const SetupPage: FC = () => {
   const navigate = useNavigate();
 
   if (isLoading) {
-    return <FullScreenLoader />;
+    return <Loader fullscreen />;
   }
 
   // If the user is logged in, navigate to the app

site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx

@@ -17,7 +17,7 @@ import type {
   TemplateVersion,
 } from "api/typesGenerated";
 import { displayError } from "components/GlobalSnackbar/utils";
-import { FullScreenLoader } from "components/Loader/FullScreenLoader";
+import { Loader } from "components/Loader/Loader";
 import { useOrganizationId } from "contexts/auth/useOrganizationId";
 import { useWatchVersionLogs } from "modules/templates/useWatchVersionLogs";
 import { type FileTree, traverse } from "utils/filetree";
@@ -120,7 +120,9 @@ export const TemplateVersionEditorPage: FC = () => {
         <title>{pageTitle(`${templateName} · Template Editor`)}</title>
       </Helmet>
 
-      {templateQuery.data && templateVersionQuery.data && fileTree ? (
+      {!(templateQuery.data && templateVersionQuery.data && fileTree) ? (
+        <Loader fullscreen />
+      ) : (
         <TemplateVersionEditor
           activePath={activePath}
           onActivePathChange={onActivePathChange}
@@ -223,8 +225,6 @@ export const TemplateVersionEditorPage: FC = () => {
             setProvisionerTags(tags);
           }}
         />
-      ) : (
-        <FullScreenLoader />
       )}
     </>
   );

site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx

@@ -18,7 +18,7 @@ import type {
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Avatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/AvatarData/AvatarData";
-import { FullScreenLoader } from "components/Loader/FullScreenLoader";
+import { Loader } from "components/Loader/Loader";
 import {
   MoreMenu,
   MoreMenuContent,
@@ -52,7 +52,7 @@ export const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
   }
 
   if (isLoading || !auths) {
-    return <FullScreenLoader />;
+    return <Loader fullscreen />;
   }
 
   return (

site/src/router.tsx

@@ -6,7 +6,7 @@ import {
   Outlet,
   Route,
 } from "react-router-dom";
-import { FullScreenLoader } from "./components/Loader/FullScreenLoader";
+import { Loader } from "./components/Loader/Loader";
 import { RequireAuth } from "./contexts/auth/RequireAuth";
 import { DashboardLayout } from "./modules/dashboard/DashboardLayout";
 import AuditPage from "./pages/AuditPage/AuditPage";
@@ -243,7 +243,7 @@ const ProvisionerDaemonsHealthPage = lazy(
 
 const RoutesWithSuspense = () => {
   return (
-    <Suspense fallback={<FullScreenLoader />}>
+    <Suspense fallback={<Loader fullscreen />}>
       <Outlet />
     </Suspense>
   );