Merge pull request Expensify#32641 from ZhenjaHorbach/tapping-connect…

…-online-with-plaid-shows-2-spin-circles-loading Android-BA-Tapping connect online with plaid shows 2 spin circles loading
Surojd · Dec 22, 2023 · f7efad3 · f7efad3
2 parents 0b39025 + 5a9f6d7
commit f7efad3
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 45 deletions.
diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
@@ -181,52 +181,62 @@ function AddPlaidBankAccount({
         );
     }
 
-    // Plaid Link view
-    if (!plaidBankAccounts.length) {
-        return (
-            <FullPageOfflineBlockingView>
-                {lodashGet(plaidData, 'isLoading') && (
-                    <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
-                        <ActivityIndicator
-                            color={theme.spinner}
-                            size="large"
-                        />
-                    </View>
-                )}
-                {Boolean(plaidDataErrorMessage) && <Text style={[styles.formError, styles.mh5]}>{plaidDataErrorMessage}</Text>}
-                {Boolean(token) && !bankName && (
-                    <PlaidLink
-                        token={token}
-                        onSuccess={({publicToken, metadata}) => {
-                            Log.info('[PlaidLink] Success!');
-                            BankAccounts.openPlaidBankAccountSelector(publicToken, metadata.institution.name, allowDebit, bankAccountID);
-                        }}
-                        onError={(error) => {
-                            Log.hmmm('[PlaidLink] Error: ', error.message);
-                        }}
-                        onEvent={(event, metadata) => {
-                            BankAccounts.setPlaidEvent(event);
-                            // Handle Plaid login errors (will potentially reset plaid token and item depending on the error)
-                            if (event === 'ERROR') {
-                                Log.hmmm('[PlaidLink] Error: ', metadata);
-                                if (bankAccountID && metadata && metadata.error_code) {
-                                    BankAccounts.handlePlaidError(bankAccountID, metadata.error_code, metadata.error_message, metadata.request_id);
-                                }
+    const renderPlaidLink = () => {
+        if (Boolean(token) && !bankName) {
+            return (
+                <PlaidLink
+                    token={token}
+                    onSuccess={({publicToken, metadata}) => {
+                        Log.info('[PlaidLink] Success!');
+                        BankAccounts.openPlaidBankAccountSelector(publicToken, metadata.institution.name, allowDebit, bankAccountID);
+                    }}
+                    onError={(error) => {
+                        Log.hmmm('[PlaidLink] Error: ', error.message);
+                    }}
+                    onEvent={(event, metadata) => {
+                        BankAccounts.setPlaidEvent(event);
+                        // Handle Plaid login errors (will potentially reset plaid token and item depending on the error)
+                        if (event === 'ERROR') {
+                            Log.hmmm('[PlaidLink] Error: ', metadata);
+                            if (bankAccountID && metadata && metadata.error_code) {
+                                BankAccounts.handlePlaidError(bankAccountID, metadata.error_code, metadata.error_message, metadata.request_id);
                             }
+                        }
 
-                            // Limit the number of times a user can submit Plaid credentials
-                            if (event === 'SUBMIT_CREDENTIALS') {
-                                App.handleRestrictedEvent(event);
-                            }
-                        }}
-                        // User prematurely exited the Plaid flow
-                        // eslint-disable-next-line react/jsx-props-no-multi-spaces
-                        onExit={onExitPlaid}
-                        receivedRedirectURI={receivedRedirectURI}
+                        // Limit the number of times a user can submit Plaid credentials
+                        if (event === 'SUBMIT_CREDENTIALS') {
+                            App.handleRestrictedEvent(event);
+                        }
+                    }}
+                    // User prematurely exited the Plaid flow
+                    // eslint-disable-next-line react/jsx-props-no-multi-spaces
+                    onExit={onExitPlaid}
+                    receivedRedirectURI={receivedRedirectURI}
+                />
+            );
+        }
+
+        if (plaidDataErrorMessage) {
+            return <Text style={[styles.formError, styles.mh5]}>{plaidDataErrorMessage}</Text>;
+        }
+
+        if (lodashGet(plaidData, 'isLoading')) {
+            return (
+                <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
+                    <ActivityIndicator
+                        color={theme.spinner}
+                        size="large"
                     />
-                )}
-            </FullPageOfflineBlockingView>
-        );
+                </View>
+            );
+        }
+
+        return <View />;
+    };
+
+    // Plaid Link view
+    if (!plaidBankAccounts.length) {
+        return <FullPageOfflineBlockingView>{renderPlaidLink()}</FullPageOfflineBlockingView>;
     }
 
     // Plaid bank accounts view

diff --git a/src/components/PlaidLink/index.tsx b/src/components/PlaidLink/index.tsx
@@ -1,10 +1,15 @@
-import {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
+import {ActivityIndicator, View} from 'react-native';
 import {PlaidLinkOnSuccessMetadata, usePlaidLink} from 'react-plaid-link';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Log from '@libs/Log';
 import PlaidLinkProps from './types';
 
 function PlaidLink({token, onSuccess = () => {}, onError = () => {}, onExit = () => {}, onEvent, receivedRedirectURI}: PlaidLinkProps) {
     const [isPlaidLoaded, setIsPlaidLoaded] = useState(false);
+    const theme = useTheme();
+    const styles = useThemeStyles();
     const successCallback = useCallback(
         (publicToken: string, metadata: PlaidLinkOnSuccessMetadata) => {
             onSuccess({publicToken, metadata});
@@ -47,7 +52,14 @@ function PlaidLink({token, onSuccess = () => {}, onError = () => {}, onExit = ()
         open();
     }, [ready, error, isPlaidLoaded, open, onError]);
 
-    return null;
+    return (
+        <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
+            <ActivityIndicator
+                color={theme.spinner}
+                size="large"
+            />
+        </View>
+    );
 }
 
 PlaidLink.displayName = 'PlaidLink';