awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4273 from Infisical/improve-initial-app-loading-ui

Browse Source 
improvement(frontend): make login/org selection loading screens consistent
This commit is contained in:
Scott Wilson
2025-07-30 09:11:33 -07:00
committed by GitHub
parent 136b0bdcb5 756b46428a
commit b9dd565926
3 changed files with 15 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/pages/auth/LoginPage/components/PasswordStep/PasswordStep.tsx
View File

@@ -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>
);
}

17
frontend/src/pages/auth/SelectOrgPage/SelectOrgPage.tsx
View File

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

17
frontend/src/pages/auth/SelectOrgPage/SelectOrgSection.tsx
View File

@@ -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 (