fix: pending state for social login

safe-global · Nov 9, 2023 · 1855023 · 1855023
1 parent 798e998
commit 1855023
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git 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
@@ -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;