From 16323e95601121da9be6a806f4f4eeb2737fd8fe Mon Sep 17 00:00:00 2001
From: Santosh Tharu <er.santoshtharu@gmail.com>
Date: Thu, 21 Mar 2024 16:59:09 +0545
Subject: [PATCH] feat: show loading overlay when user logs out

---
 .../src/components/Dashboard/TopbarUser.tsx   | 78 ++++++++++---------
 .../webapp/src/components/LoadingOverlay.tsx  | 23 ++++++
 .../src/containers/Setup/SetupLeftSection.tsx | 37 +++++----
 3 files changed, 85 insertions(+), 53 deletions(-)
 create mode 100644 packages/webapp/src/components/LoadingOverlay.tsx

diff --git a/packages/webapp/src/components/Dashboard/TopbarUser.tsx b/packages/webapp/src/components/Dashboard/TopbarUser.tsx
index e8e56225a..d056ba107 100644
--- a/packages/webapp/src/components/Dashboard/TopbarUser.tsx
+++ b/packages/webapp/src/components/Dashboard/TopbarUser.tsx
@@ -15,6 +15,7 @@ import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 import { useAuthOidcLogout, useAuthenticatedAccount } from '@/hooks/query';
 import { firstLettersArgs, compose } from '@/utils';
+import { LoadingOverlay } from '@/components/LoadingOverlay'
 
 /**
  * Dashboard topbar user.
@@ -24,7 +25,7 @@ function DashboardTopbarUser({
   openDialog,
 }) {
   const history = useHistory();
-  const { mutateAsync: oidcLogoutMutate } = useAuthOidcLogout();
+  const {isLoading:isLoggingOut, mutateAsync: oidcLogoutMutate } = useAuthOidcLogout();
 
   // Retrieve authenticated user information.
   const { data: user } = useAuthenticatedAccount();
@@ -38,43 +39,46 @@ function DashboardTopbarUser({
   };
 
   return (
-    <Popover
-      content={
-        <Menu className={'menu--logged-user-dropdown'}>
-          <MenuItem
-            multiline={true}
-            className={'menu-item--profile'}
-            text={
-              <div>
-                <div class="person">
-                  {user.first_name} {user.last_name}
+    <>
+      <Popover
+        content={
+          <Menu className={'menu--logged-user-dropdown'}>
+            <MenuItem
+              multiline={true}
+              className={'menu-item--profile'}
+              text={
+                <div>
+                  <div class="person">
+                    {user.first_name} {user.last_name}
+                  </div>
+                  <div class="org">
+                    <T id="organization_id" />: {user.tenant_id}
+                  </div>
                 </div>
-                <div class="org">
-                  <T id="organization_id" />: {user.tenant_id}
-                </div>
-              </div>
-            }
-          />
-          <MenuDivider />
-          <MenuItem
-            text={<T id={'keyboard_shortcuts'} />}
-            onClick={onKeyboardShortcut}
-          />
-          <MenuItem
-            text={<T id={'preferences'} />}
-            onClick={() => history.push('/preferences')}
-          />
-          <MenuItem text={<T id={'logout'} />} onClick={onClickLogout} />
-        </Menu>
-      }
-      position={Position.BOTTOM}
-    >
-      <Button>
-        <div className="user-text">
-          {firstLettersArgs(user.first_name, user.last_name)}
-        </div>
-      </Button>
-    </Popover>
+              }
+            />
+            <MenuDivider />
+            <MenuItem
+              text={<T id={'keyboard_shortcuts'} />}
+              onClick={onKeyboardShortcut}
+            />
+            <MenuItem
+              text={<T id={'preferences'} />}
+              onClick={() => history.push('/preferences')}
+            />
+            <MenuItem text={<T id={'logout'} />} onClick={onClickLogout} />
+          </Menu>
+        }
+        position={Position.BOTTOM}
+      >
+        <Button>
+          <div className="user-text">
+            {firstLettersArgs(user.first_name, user.last_name)}
+          </div>
+        </Button>
+      </Popover>
+      {isLoggingOut && <LoadingOverlay/>}
+    </>
   );
 }
 export default compose(
diff --git a/packages/webapp/src/components/LoadingOverlay.tsx b/packages/webapp/src/components/LoadingOverlay.tsx
new file mode 100644
index 000000000..e4e971676
--- /dev/null
+++ b/packages/webapp/src/components/LoadingOverlay.tsx
@@ -0,0 +1,23 @@
+import {  Spinner } from "@blueprintjs/core"
+import styled from "styled-components"
+
+export function LoadingOverlay() {
+  return (
+    <OverlayContainer>
+      <Spinner size={50} />
+    </OverlayContainer>
+  );
+}
+
+const OverlayContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index:999;
+  background: rgba(252, 253, 255, 0.5);
+  display: flex;
+  justify-content: center;
+`;
+
diff --git a/packages/webapp/src/containers/Setup/SetupLeftSection.tsx b/packages/webapp/src/containers/Setup/SetupLeftSection.tsx
index 93a6f4bae..61f77856d 100644
--- a/packages/webapp/src/containers/Setup/SetupLeftSection.tsx
+++ b/packages/webapp/src/containers/Setup/SetupLeftSection.tsx
@@ -4,6 +4,7 @@ import { Icon, For, FormattedMessage as T } from '@/components';
 
 import { getFooterLinks } from '@/constants/footerLinks';
 import { useAuthOidcLogout } from '@/hooks/query'
+import { LoadingOverlay } from '@/components/LoadingOverlay'
 
 /**
  * Footer item link.
@@ -38,7 +39,7 @@ function SetupLeftSectionFooter() {
  * Setup left section header.
  */
 function SetupLeftSectionHeader() {
-  const { mutateAsync: oidcLogoutMutate } = useAuthOidcLogout();
+  const {isLoading:isLoggingOut, mutateAsync: oidcLogoutMutate } = useAuthOidcLogout();
 
   // Handle logout link click.
   const onClickLogout = () => {
@@ -46,24 +47,28 @@ function SetupLeftSectionHeader() {
   };
 
   return (
-    <div className={'content__header'}>
-      <h1 className={'content__title'}>
-        <T id={'setup.left_side.title'} />
-      </h1>
+    <>
+      <div className={'content__header'}>
+        <h1 className={'content__title'}>
+          <T id={'setup.left_side.title'} />
+        </h1>
 
-      <p className={'content__text'}>
-        <T id={'setup.left_side.description'} />
-      </p>
-      <div class="content__divider"></div>
+        <p className={'content__text'}>
+          <T id={'setup.left_side.description'} />
+        </p>
+        <div class="content__divider"></div>
 
-      <div className={'content__organization'}>
-        <span class="signout">
-          <a onClick={onClickLogout} href="#">
-            <T id={'sign_out'} />
-          </a>
-        </span>
+        <div className={'content__organization'}>
+          <span class="signout">
+            <a onClick={onClickLogout} href="#">
+              <T id={'sign_out'} />
+            </a>
+          </span>
+        </div>
       </div>
-    </div>
+
+      {isLoggingOut && <LoadingOverlay />}
+    </>
   );
 }