Merge pull request #29260 from honnamkuan/27901

fix blinking loader in connect bank account page

Author: marcochavezf

src/libs/actions/BankAccounts.js

@@ -275,6 +275,10 @@ function validateBankAccount(bankAccountID, validateCode) {
     );
 }
 
+function clearReimbursementAccount() {
+    Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT, null);
+}
+
 function openReimbursementAccountPage(stepToOpen, subStep, localCurrentStep) {
     const onyxData = {
         optimisticData: [
@@ -436,6 +440,7 @@ export {
     deletePaymentBankAccount,
     handlePlaidError,
     openPersonalBankAccountSetupView,
+    clearReimbursementAccount,
     openReimbursementAccountPage,
     updateBeneficialOwnersForBankAccount,
     updateCompanyInformationForBankAccount,

src/pages/ReimbursementAccount/ReimbursementAccountPage.js

@@ -105,10 +105,12 @@ class ReimbursementAccountPage extends React.Component {
         this.goBack = this.goBack.bind(this);
         this.requestorStepRef = React.createRef();
 
-        // The first time we open this page, the props.reimbursementAccount has not been loaded from the server.
-        // Calculating shouldShowContinueSetupButton on the default data doesn't make sense, and we should recalculate
+        // The first time we open this page, props.reimbursementAccount is either not available in Onyx
+        // or only partial data loaded where props.reimbursementAccount.achData.currentStep is not available
+        // Calculating shouldShowContinueSetupButton on first page open doesn't make sense, and we should recalculate
         // it once we get the response from the server the first time in componentDidUpdate.
-        const hasACHDataBeenLoaded = this.props.reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps;
+        const hasACHDataBeenLoaded =
+            this.props.reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && _.has(this.props.reimbursementAccount, 'achData.currentStep');
         this.state = {
             hasACHDataBeenLoaded,
             shouldShowContinueSetupButton: hasACHDataBeenLoaded ? this.getShouldShowContinueSetupButtonInitialValue() : false,
@@ -183,6 +185,10 @@ class ReimbursementAccountPage extends React.Component {
         Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(this.getRouteForCurrentStep(currentStep), policyId, backTo));
     }
 
+    componentWillUnmount() {
+        BankAccounts.clearReimbursementAccount();
+    }
+
     getFieldsForStep(step) {
         switch (step) {
             case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT: