Merge pull request Expensify#39790 from bernhardoj/fix/36376-ba-data-…

…is-cleared

Fix workspace BA data is cleared when close the bank account page

src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx

@@ -198,18 +198,16 @@ function ReimbursementAccountPage({
     }
 
     /**
-        When this page is first opened, `reimbursementAccount` prop might not yet be fully loaded from Onyx
-        or could be partially loaded such that `reimbursementAccount.achData.currentStep` is unavailable.
+        When this page is first opened, `reimbursementAccount` prop might not yet be fully loaded from Onyx.
         Calculating `shouldShowContinueSetupButton` immediately on initial render doesn't make sense as
         it relies on complete data. Thus, we should wait to calculate it until we have received
         the full `reimbursementAccount` data from the server. This logic is handled within the useEffect hook,
         which acts similarly to `componentDidUpdate` when the `reimbursementAccount` dependency changes.
      */
-    const [hasACHDataBeenLoaded, setHasACHDataBeenLoaded] = useState(
-        reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && reimbursementAccount?.achData && 'currentStep' in reimbursementAccount.achData,
-    );
+    const [hasACHDataBeenLoaded, setHasACHDataBeenLoaded] = useState(reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps);
 
     const [shouldShowContinueSetupButton, setShouldShowContinueSetupButton] = useState(hasACHDataBeenLoaded ? getShouldShowContinueSetupButtonInitialValue() : false);
+    const [isReimbursementAccountLoading, setIsReimbursementAccountLoading] = useState(true);
 
     // eslint-disable-next-line  @typescript-eslint/prefer-nullish-coalescing
     const currentStep = achData?.currentStep || CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
@@ -219,6 +217,7 @@ function ReimbursementAccountPage({
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
     const requestorStepRef = useRef(null);
+    const prevIsReimbursementAccountLoading = usePrevious(reimbursementAccount?.isLoading);
     const prevReimbursementAccount = usePrevious(reimbursementAccount);
     const prevIsOffline = usePrevious(isOffline);
 
@@ -240,12 +239,16 @@ function ReimbursementAccountPage({
 
     useEffect(() => {
         fetchData();
-        return () => {
-            BankAccounts.clearReimbursementAccount();
-        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []); // The empty dependency array ensures this runs only once after the component mounts.
 
+    useEffect(() => {
+        if (typeof reimbursementAccount?.isLoading !== 'boolean' || reimbursementAccount.isLoading === prevIsReimbursementAccountLoading) {
+            return;
+        }
+        setIsReimbursementAccountLoading(reimbursementAccount.isLoading);
+    }, [prevIsReimbursementAccountLoading, reimbursementAccount?.isLoading]);
+
     useEffect(
         () => {
             // Check for network change from offline to online
@@ -254,7 +257,7 @@ function ReimbursementAccountPage({
             }
 
             if (!hasACHDataBeenLoaded) {
-                if (reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && reimbursementAccount?.isLoading === false) {
+                if (reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && isReimbursementAccountLoading === false) {
                     setShouldShowContinueSetupButton(getShouldShowContinueSetupButtonInitialValue());
                     setHasACHDataBeenLoaded(true);
                 }
@@ -366,7 +369,7 @@ function ReimbursementAccountPage({
         }
     };
 
-    const isLoading = (!!isLoadingApp || !!account?.isLoading || reimbursementAccount?.isLoading) && (!plaidCurrentEvent || plaidCurrentEvent === CONST.BANK_ACCOUNT.PLAID.EVENTS_NAME.EXIT);
+    const isLoading = (!!isLoadingApp || !!account?.isLoading || isReimbursementAccountLoading) && (!plaidCurrentEvent || plaidCurrentEvent === CONST.BANK_ACCOUNT.PLAID.EVENTS_NAME.EXIT);
 
     const shouldShowOfflineLoader = !(
         isOffline &&