From 756b46428a0d139c6be7d2173205e55d68d47728 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Tue, 29 Jul 2025 21:34:32 -0700
Subject: [PATCH] improvement: make login/org selection loading screens
 consistent with new loader

---
 .../components/PasswordStep/PasswordStep.tsx    |  7 +++----
 .../pages/auth/SelectOrgPage/SelectOrgPage.tsx  | 17 ++++++-----------
 .../auth/SelectOrgPage/SelectOrgSection.tsx     | 17 ++++++-----------
 3 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/frontend/src/pages/auth/LoginPage/components/PasswordStep/PasswordStep.tsx b/frontend/src/pages/auth/LoginPage/components/PasswordStep/PasswordStep.tsx
index 91432f9be..86dff5288 100644
--- a/frontend/src/pages/auth/LoginPage/components/PasswordStep/PasswordStep.tsx
+++ b/frontend/src/pages/auth/LoginPage/components/PasswordStep/PasswordStep.tsx
@@ -11,7 +11,7 @@ import { createNotification } from "@app/components/notifications";
 import attemptCliLogin from "@app/components/utilities/attemptCliLogin";
 import attemptLogin from "@app/components/utilities/attemptLogin";
 import SecurityClient from "@app/components/utilities/SecurityClient";
-import { Button, Input, Spinner } from "@app/components/v2";
+import { Button, ContentLoader, Input } from "@app/components/v2";
 import { envConfig } from "@app/config/env";
 import { SessionStorageKeys } from "@app/const";
 import { useToggle } from "@app/hooks";
@@ -329,9 +329,8 @@ export const PasswordStep = ({
 
   if (hasExchangedPrivateKey) {
     return (
-      <div className="flex max-h-screen min-h-screen flex-col items-center justify-center gap-2 overflow-y-auto bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
-        <Spinner />
-        <p className="text-white opacity-80">Loading, please wait</p>
+      <div className="fixed left-0 top-0 h-screen w-screen bg-bunker-800">
+        <ContentLoader />
       </div>
     );
   }
diff --git a/frontend/src/pages/auth/SelectOrgPage/SelectOrgPage.tsx b/frontend/src/pages/auth/SelectOrgPage/SelectOrgPage.tsx
index f66be2d4b..b22f0f0fa 100644
--- a/frontend/src/pages/auth/SelectOrgPage/SelectOrgPage.tsx
+++ b/frontend/src/pages/auth/SelectOrgPage/SelectOrgPage.tsx
@@ -1,26 +1,21 @@
 import { useState } from "react";
 
-import { Spinner } from "@app/components/v2";
+import { ContentLoader } from "@app/components/v2";
 import { useGetMyDuplicateAccount } from "@app/hooks/api";
 
 import { EmailDuplicationConfirmation } from "./EmailDuplicationConfirmation";
 import { SelectOrganizationSection } from "./SelectOrgSection";
 
-const LoadingScreen = () => {
-  return (
-    <div className="flex max-h-screen min-h-screen flex-col items-center justify-center gap-2 overflow-y-auto bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
-      <Spinner />
-      <p className="text-white opacity-80">Loading, please wait</p>
-    </div>
-  );
-};
-
 export const SelectOrganizationPage = () => {
   const duplicateAccounts = useGetMyDuplicateAccount();
   const [removeDuplicateLater, setRemoveDuplicateLater] = useState(false);
 
   if (duplicateAccounts.isPending) {
-    return <LoadingScreen />;
+    return (
+      <div className="h-screen w-screen bg-bunker-800">
+        <ContentLoader />
+      </div>
+    );
   }
 
   if (duplicateAccounts.data?.duplicateAccounts?.length && !removeDuplicateLater) {
diff --git a/frontend/src/pages/auth/SelectOrgPage/SelectOrgSection.tsx b/frontend/src/pages/auth/SelectOrgPage/SelectOrgSection.tsx
index ac194cd05..3e3a5909f 100644
--- a/frontend/src/pages/auth/SelectOrgPage/SelectOrgSection.tsx
+++ b/frontend/src/pages/auth/SelectOrgPage/SelectOrgSection.tsx
@@ -12,7 +12,7 @@ import { Mfa } from "@app/components/auth/Mfa";
 import { createNotification } from "@app/components/notifications";
 import { IsCliLoginSuccessful } from "@app/components/utilities/attemptCliLogin";
 import SecurityClient from "@app/components/utilities/SecurityClient";
-import { Button, Spinner } from "@app/components/v2";
+import { Button, ContentLoader, Spinner } from "@app/components/v2";
 import { SessionStorageKeys } from "@app/const";
 import { OrgMembershipRole } from "@app/helpers/roles";
 import { useToggle } from "@app/hooks";
@@ -29,15 +29,6 @@ import { AuthMethod } from "@app/hooks/api/users/types";
 
 import { navigateUserToOrg } from "../LoginPage/Login.utils";
 
-const LoadingScreen = () => {
-  return (
-    <div className="flex max-h-screen min-h-screen flex-col items-center justify-center gap-2 overflow-y-auto bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
-      <Spinner />
-      <p className="text-white opacity-80">Loading, please wait</p>
-    </div>
-  );
-};
-
 export const SelectOrganizationSection = () => {
   const navigate = useNavigate();
   const { t } = useTranslation();
@@ -228,7 +219,11 @@ export const SelectOrganizationSection = () => {
     !user ||
     ((isInitialOrgCheckLoading || defaultSelectedOrg) && !shouldShowMfa)
   ) {
-    return <LoadingScreen />;
+    return (
+      <div className="h-screen w-screen bg-bunker-800">
+        <ContentLoader />
+      </div>
+    );
   }
 
   return (