diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx index 04254bbe1559..5950cc796e48 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx +++ b/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 &&