Merge pull request #110 from MobilityData/copilot/add-loading-state-to-sign-in

Add loading overlay to sign-in page during login

Author: Alessandro100

src/app/[locale]/sign-in/SignIn.tsx

@@ -30,6 +30,8 @@ import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import {
   Alert,
+  Backdrop,
+  CircularProgress,
   Divider,
   IconButton,
   InputAdornment,
@@ -59,8 +61,11 @@ export default function SignIn(): React.ReactElement {
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [showPassword, setShowPassword] = React.useState(false);
   const [showNoEmailSnackbar, setShowNoEmailSnackbar] = React.useState(false);
+  const [isOAuthLoading, setIsOAuthLoading] = React.useState(false);
   const searchParams = useSearchParams();
 
+  const isLoading = userProfileStatus === 'login_in' || isOAuthLoading;
+
   const SignInSchema = Yup.object().shape({
     email: Yup.string()
       .email('Email format is invalid.')
@@ -92,6 +97,12 @@ export default function SignIn(): React.ReactElement {
     },
   });
 
+  React.useEffect(() => {
+    if (emailLoginError != null) {
+      setIsOAuthLoading(false);
+    }
+  }, [emailLoginError]);
+
   React.useEffect(() => {
     if (userProfileStatus === 'registered') {
       if (searchParams.has('add_feed')) {
@@ -111,18 +122,21 @@ export default function SignIn(): React.ReactElement {
   const signInWithProvider = (oauthProvider: OauthProvider): void => {
     const auth = getAuth();
     const provider = oathProviders[oauthProvider];
+    setIsOAuthLoading(true);
     signInWithPopup(auth, provider)
       .then((userCredential: UserCredential) => {
         if (!userCredential.user.emailVerified) {
           dispatch(verifyEmail());
         }
         if (userCredential.user.email == null) {
+          setIsOAuthLoading(false);
           setShowNoEmailSnackbar(true);
         } else {
           dispatch(loginWithProvider({ oauthProvider, userCredential }));
         }
       })
       .catch((error) => {
+        setIsOAuthLoading(false);
         dispatch(
           loginFail({
             code: error.code,
@@ -135,6 +149,13 @@ export default function SignIn(): React.ReactElement {
 
   return (
     <Container component='main' maxWidth='xs'>
+      <Backdrop
+        open={isLoading}
+        sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        data-testid='signin-loading-overlay'
+      >
+        <CircularProgress aria-label='Signing in...' />
+      </Backdrop>
       <Snackbar
         open={showNoEmailSnackbar}
         anchorOrigin={{ vertical: 'top', horizontal: 'center' }}