From 2d99d3180393aade526ec4bc68194d3ea538ca79 Mon Sep 17 00:00:00 2001
From: Lautaro Petaccio <1120791+LautaroPetaccio@users.noreply.github.com>
Date: Tue, 21 May 2024 14:30:55 -0300
Subject: [PATCH] feat: Add discconnecting loader (#543)

---
 src/components/UserMenu/UserMenu.css         |  6 ++
 src/components/UserMenu/UserMenu.stories.css | 14 ++--
 src/components/UserMenu/UserMenu.stories.tsx | 10 +++
 src/components/UserMenu/UserMenu.tsx         | 70 ++++++++++++--------
 src/components/UserMenu/UserMenu.types.ts    |  1 +
 5 files changed, 68 insertions(+), 33 deletions(-)

diff --git a/src/components/UserMenu/UserMenu.css b/src/components/UserMenu/UserMenu.css
index 89fadbec..e7d190a9 100644
--- a/src/components/UserMenu/UserMenu.css
+++ b/src/components/UserMenu/UserMenu.css
@@ -5,6 +5,12 @@
   outline: none;
 }
 
+.dcl .user-menu-loader {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
 .dcl .user-menu__jump-in {
   padding: 14px 32px;
   margin-left: 24px;
diff --git a/src/components/UserMenu/UserMenu.stories.css b/src/components/UserMenu/UserMenu.stories.css
index b85cba0d..c1c3da48 100644
--- a/src/components/UserMenu/UserMenu.stories.css
+++ b/src/components/UserMenu/UserMenu.stories.css
@@ -1,14 +1,16 @@
 .usermenu-story-container {
-  position: absolute;
-  top: 100px;
-  right: 100px;
-  height: 100vh;
-  width: 100%;
+  width: 500px;
+  padding: 10px;
+  border: 2px solid #7c7777;
+  border-radius: 5px;
 }
 
 @media (max-width: 991px) {
   .usermenu-story-container {
+    position: absolute;
+    height: 400px;
+    width: 100vw;
+    top: 100px;
     left: 0;
-    right: 0;
   }
 }
diff --git a/src/components/UserMenu/UserMenu.stories.tsx b/src/components/UserMenu/UserMenu.stories.tsx
index 66d9ede8..4097f18d 100644
--- a/src/components/UserMenu/UserMenu.stories.tsx
+++ b/src/components/UserMenu/UserMenu.stories.tsx
@@ -23,6 +23,16 @@ storiesOf('UserMenu', module)
       <UserMenu i18n={i18n} isSignedIn avatar={avatar} />
     </div>
   ))
+  .add('Signing in', () => (
+    <div className="usermenu-story-container">
+      <UserMenu i18n={i18n} isSigningIn />
+    </div>
+  ))
+  .add('Disconnecting', () => (
+    <div className="usermenu-story-container">
+      <UserMenu i18n={i18n} isDisconnecting />
+    </div>
+  ))
   .add('Guest', () => (
     <div className="usermenu-story-container">
       <UserMenu
diff --git a/src/components/UserMenu/UserMenu.tsx b/src/components/UserMenu/UserMenu.tsx
index 608030ee..b71e1bb6 100644
--- a/src/components/UserMenu/UserMenu.tsx
+++ b/src/components/UserMenu/UserMenu.tsx
@@ -8,6 +8,7 @@ import { i18n as i18nUserMenu } from './UserMenu.i18n'
 import { UserMenuProps, UserMenuEventId } from './UserMenu.types'
 import { Button } from '../Button/Button'
 import { Column } from '../Column/Column'
+import { Loader } from '../Loader/Loader'
 import { config } from '../../config'
 import { Row } from '../Row/Row'
 
@@ -18,6 +19,7 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
   const {
     isSignedIn,
     isSigningIn,
+    isDisconnecting,
     manaBalances,
     i18n = i18nUserMenu,
     onClickSignIn,
@@ -132,34 +134,48 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
           onBlur={handleClose}
           tabIndex={0}
         >
-          {isSignedIn && (
-            <UserMenuSignedIn
-              {...signInProps}
-              manaBalances={manaBalances}
-              trackingId={trackingId}
-              isOpen={isOpen}
-              i18n={i18n}
-              onClickToggle={handleToggle}
-              onClickClose={handleClose}
-              onClickUserMenuItem={onClickUserMenuItem}
-              onClickBalance={handleClickBalance}
-            />
+          {isDisconnecting ? (
+            <div className="dcl user-menu-loader">
+              <Loader inline active size="medium" />
+            </div>
+          ) : (
+            <>
+              {isSignedIn && (
+                <UserMenuSignedIn
+                  {...signInProps}
+                  manaBalances={manaBalances}
+                  trackingId={trackingId}
+                  isOpen={isOpen}
+                  i18n={i18n}
+                  onClickToggle={handleToggle}
+                  onClickClose={handleClose}
+                  onClickUserMenuItem={onClickUserMenuItem}
+                  onClickBalance={handleClickBalance}
+                />
+              )}
+              {!isSignedIn ? (
+                <Button
+                  inverted
+                  disabled={isSigningIn}
+                  loading={isSigningIn}
+                  onClick={handleClickSignIn}
+                >
+                  {i18n.signIn}
+                </Button>
+              ) : null}
+              {isSignedIn && (
+                <Button
+                  className="user-menu__jump-in"
+                  primary
+                  onClick={handleClickJumpIn}
+                  as={'a'}
+                  href={config.get('EXPLORER_URL')}
+                >
+                  {i18n.jumpIn}
+                </Button>
+              )}
+            </>
           )}
-          {!isSignedIn && (
-            <Button inverted disabled={isSigningIn} onClick={handleClickSignIn}>
-              {i18n.signIn}
-            </Button>
-          )}
-          <Button
-            className="user-menu__jump-in"
-            primary
-            disabled={isSigningIn}
-            onClick={handleClickJumpIn}
-            as={'a'}
-            href={config.get('EXPLORER_URL')}
-          >
-            {i18n.jumpIn}
-          </Button>
         </div>
       </Row>
     </Column>
diff --git a/src/components/UserMenu/UserMenu.types.ts b/src/components/UserMenu/UserMenu.types.ts
index cd180f99..a888cd68 100644
--- a/src/components/UserMenu/UserMenu.types.ts
+++ b/src/components/UserMenu/UserMenu.types.ts
@@ -7,6 +7,7 @@ export type UserMenuProps = Omit<
 > & {
   isSignedIn?: boolean
   isSigningIn?: boolean
+  isDisconnecting?: boolean
   isActivity?: boolean
   i18n?: UserMenuI18N
   onClickSignIn?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void