From a4dd21dd251fae3da0249cef4f8470c462d32cf9 Mon Sep 17 00:00:00 2001
From: Himanshu Mishra <himanshu@orkohunter.net>
Date: Tue, 18 May 2021 11:24:05 +0200
Subject: [PATCH] SignInPage: prevent a small glitch on page load when user is
 logged in

Signed-off-by: Himanshu Mishra <himanshu@orkohunter.net>
---
 .../core/src/layout/SignInPage/SignInPage.tsx | 44 ++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/core/src/layout/SignInPage/SignInPage.tsx b/packages/core/src/layout/SignInPage/SignInPage.tsx
index 46d91a5375..74a53b6b45 100644
--- a/packages/core/src/layout/SignInPage/SignInPage.tsx
+++ b/packages/core/src/layout/SignInPage/SignInPage.tsx
@@ -90,29 +90,43 @@ export const SingleSignInPage = ({
   const [retry, setRetry] = useState<{} | boolean | undefined>(auto);
   const [error, setError] = useState<Error>();
 
+  // The SignIn component takes some time to decide whether the user is logged-in or not.
+  // showLoginPage is used to prevent a glitch-like experience where the sign-in page is
+  // displayed for a split second when the user is already logged-in.
+  const [showLoginPage, setShowLoginPage] = useState<boolean>(false);
+
   useEffect(() => {
     const login = async () => {
-      const identity = await authApi.getBackstageIdentity();
+      try {
+        const identity = await authApi.getBackstageIdentity();
 
-      const profile = await authApi.getProfile();
-      onResult({
-        userId: identity!.id,
-        profile: profile!,
-        getIdToken: () => {
-          return authApi.getBackstageIdentity().then(i => i!.idToken);
-        },
-        signOut: async () => {
-          await authApi.signOut();
-        },
-      });
+        const profile = await authApi.getProfile();
+        onResult({
+          userId: identity!.id,
+          profile: profile!,
+          getIdToken: () => {
+            return authApi.getBackstageIdentity().then(i => i!.idToken);
+          },
+          signOut: async () => {
+            await authApi.signOut();
+          },
+        });
+
+        // Don't show if login is successful
+        setShowLoginPage(false);
+      } catch (err) {
+        // User closed the sign-in modal
+        setError(err);
+        setShowLoginPage(true);
+      }
     };
 
     if (retry) {
-      login().catch(setError);
+      login();
     }
   }, [onResult, authApi, retry]);
 
-  return (
+  return showLoginPage ? (
     <Page themeId="home">
       <Header title={configApi.getString('app.title')} />
       <Content>
@@ -148,7 +162,7 @@ export const SingleSignInPage = ({
         </Grid>
       </Content>
     </Page>
-  );
+  ) : null;
 };
 
 export const SignInPage = (props: Props) => {