improvement: make login/org selection loading screens consistent with new loader

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">
+      <div className="fixed left-0 top-0 h-screen w-screen bg-bunker-800">
-        <Spinner />
+        <ContentLoader />
-        <p className="text-white opacity-80">Loading, please wait</p>
       </div>
     );
   }

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) {

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 (