From 185502346b6056eba54733c3f7b09132532f2d68 Mon Sep 17 00:00:00 2001
From: schmanu <manu@safe.global>
Date: Thu, 9 Nov 2023 17:06:24 +0100
Subject: [PATCH] fix: pending state for social login

---
 src/components/common/SocialSigner/index.tsx     | 16 +++++++++++++++-
 .../common/SocialSigner/styles.module.css        | 10 ++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/common/SocialSigner/index.tsx b/src/components/common/SocialSigner/index.tsx
index 503327fd49..ac30d1e5ca 100644
--- a/src/components/common/SocialSigner/index.tsx
+++ b/src/components/common/SocialSigner/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, SvgIcon, Tooltip, Typography } from '@mui/material'
+import { Box, Button, LinearProgress, SvgIcon, Tooltip, Typography } from '@mui/material'
 import { useCallback, useContext, useMemo, useState } from 'react'
 import { PasswordRecovery } from '@/components/common/SocialSigner/PasswordRecovery'
 import GoogleLogo from '@/public/images/welcome/logo-google.svg'
@@ -118,6 +118,13 @@ export const SocialSigner = ({
               disabled={isDisabled}
               fullWidth
             >
+              <LinearProgress
+                color="secondary"
+                className={css.loginProgress}
+                sx={{
+                  opacity: loginPending ? 1 : 0,
+                }}
+              />
               <Box width="100%" display="flex" flexDirection="row" alignItems="center" gap={1}>
                 <img
                   src={userInfo.profileImage}
@@ -145,6 +152,13 @@ export const SocialSigner = ({
               fullWidth
               sx={{ borderWidth: '1px !important' }}
             >
+              <LinearProgress
+                color="secondary"
+                className={css.loginProgress}
+                sx={{
+                  opacity: loginPending ? 1 : 0,
+                }}
+              />
               <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
                 <SvgIcon component={GoogleLogo} inheritViewBox fontSize="medium" /> Continue with Google
               </Box>
diff --git a/src/components/common/SocialSigner/styles.module.css b/src/components/common/SocialSigner/styles.module.css
index 92c29890de..2b81df624a 100644
--- a/src/components/common/SocialSigner/styles.module.css
+++ b/src/components/common/SocialSigner/styles.module.css
@@ -10,6 +10,16 @@
   align-items: flex-start;
 }
 
+.loginProgress {
+  margin-bottom: -16px;
+  top: 0;
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
 .passwordWrapper {
   padding: var(--space-4) var(--space-4) var(--space-2) var(--space-4);
   display: flex;