feat: display loading indicator while waiting for login response

dev-client/src/screens/LoginScreen.tsx

@@ -15,9 +15,10 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import {useCallback, useEffect} from 'react';
+import {useCallback, useEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
 import {Platform, StyleSheet} from 'react-native';
+import {ActivityIndicator} from 'react-native-paper';
 import {SafeAreaView} from 'react-native-safe-area-context';
 
 import {
@@ -28,7 +29,7 @@ import {
 
 import {Button} from 'native-base';
 
-import {setHasAccessTokenAsync} from 'terraso-client-shared/account/accountSlice';
+import {setHasToken} from 'terraso-client-shared/account/accountSlice';
 import GoogleLogo from 'terraso-client-shared/assets/google.svg';
 import MicrosoftLogo from 'terraso-client-shared/assets/microsoft.svg';
 
@@ -47,27 +48,68 @@ import {theme} from 'terraso-mobile-client/theme';
 
 const showAppleAuth = Platform.OS === 'ios';
 
+type LoginButtonsProps = {
+  onPress: (provider: AuthProvider) => void;
+};
+
+const LoginButtons = ({onPress}: LoginButtonsProps) => {
+  const {t} = useTranslation();
+  return (
+    <Button.Group direction="column" space={5}>
+      <Button
+        style={styles.loginButton}
+        _text={styles.loginButtonText}
+        size="lg"
+        onPress={() => onPress('google')}
+        startIcon={<GoogleLogo />}>
+        {t('account.google_login')}
+      </Button>
+      <Button
+        style={styles.loginButton}
+        _text={styles.loginButtonText}
+        size="lg"
+        onPress={() => onPress('microsoft')}
+        startIcon={<MicrosoftLogo />}>
+        {t('account.microsoft_login')}
+      </Button>
+      {showAppleAuth ? (
+        <AppleAuthenticationButton
+          buttonType={AppleAuthenticationButtonType.SIGN_IN}
+          buttonStyle={AppleAuthenticationButtonStyle.WHITE}
+          style={styles.appleloginButton}
+          onPress={() => onPress('apple')}
+        />
+      ) : (
+        <></>
+      )}
+    </Button.Group>
+  );
+};
+
 export const LoginScreen = () => {
   const {t} = useTranslation();
   const navigation = useNavigation();
   const loggedIn = useSelector(
     state => state.account.currentUser.data !== null,
   );
+  const [isLoading, setIsLoading] = useState(false);
 
   // note: we intentionally run this on every render,
   // so we can't accidentally get stuck on this view because
   // it was navigated to while there is already user data
 
   const dispatch = useDispatch();
   const onPress = useCallback(
-    (providerName: AuthProvider) => {
-      return () => {
-        auth(providerName)
-          .then(() => {
-            dispatch(setHasAccessTokenAsync());
-          })
-          .catch(e => console.error(e));
-      };
+    async (providerName: AuthProvider) => {
+      try {
+        setIsLoading(true);
+        await auth(providerName);
+        dispatch(setHasToken(true));
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setIsLoading(false);
+      }
     },
     [dispatch],
   );
@@ -105,34 +147,13 @@ export const LoginScreen = () => {
           </Heading>
         </Column>
         <Column alignItems="center" flexGrow={1}>
-          <Button.Group direction="column" space={5}>
-            <Button
-              style={styles.loginButton}
-              _text={styles.loginButtonText}
-              size="lg"
-              onPress={onPress('google')}
-              startIcon={<GoogleLogo />}>
-              {t('account.google_login')}
-            </Button>
-            <Button
-              style={styles.loginButton}
-              _text={styles.loginButtonText}
-              size="lg"
-              onPress={onPress('microsoft')}
-              startIcon={<MicrosoftLogo />}>
-              {t('account.microsoft_login')}
-            </Button>
-            {showAppleAuth ? (
-              <AppleAuthenticationButton
-                buttonType={AppleAuthenticationButtonType.SIGN_IN}
-                buttonStyle={AppleAuthenticationButtonStyle.WHITE}
-                style={styles.appleloginButton}
-                onPress={onPress('apple')}
-              />
-            ) : (
-              <></>
-            )}
-          </Button.Group>
+          {!isLoading && <LoginButtons onPress={onPress} />}
+          {isLoading && (
+            <ActivityIndicator
+              size="large"
+              color={theme.colors.primary.contrast}
+            />
+          )}
         </Column>
         <Column alignItems="center">
           <Row alignItems="flex-end" mb="6px">