From ae469550901b470d0f69a303345a147b6ea84883 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 6 Apr 2024 20:55:13 +0800 Subject: [PATCH 1/2] don't clear ba data on unmount and fix loader blinking issue --- .../ReimbursementAccountPage.js | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js index 0f5d04919e29..d352e73ac05d 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js @@ -236,18 +236,16 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol } /** - 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 && _.has(reimbursementAccount, 'achData.currentStep'), - ); + const [hasACHDataBeenLoaded, setHasACHDataBeenLoaded] = useState(reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps); const [shouldShowContinueSetupButton, setShouldShowContinueSetupButton] = useState(hasACHDataBeenLoaded ? getShouldShowContinueSetupButtonInitialValue() : false); + const [isReimbursementAccountLoading, setIsReimbursementAccountLoading] = useState(true); const currentStep = achData.currentStep || CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT; const policyName = lodashGet(policy, 'name', ''); @@ -256,6 +254,7 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol const {translate} = useLocalize(); const {isOffline} = useNetwork(); const requestorStepRef = useRef(null); + const prevIsReimbursementAccountLoading = usePrevious(reimbursementAccount.isLoading); const prevReimbursementAccount = usePrevious(reimbursementAccount); const prevIsOffline = usePrevious(isOffline); @@ -278,14 +277,18 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol 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 (reimbursementAccount.isLoading === prevIsReimbursementAccountLoading) { + return; + } + setIsReimbursementAccountLoading(reimbursementAccount.isLoading); + }, [prevIsReimbursementAccountLoading, reimbursementAccount.isLoading]); + useEffect( () => { // Check for network change from offline to online @@ -294,7 +297,7 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol } if (!hasACHDataBeenLoaded) { - if (reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && reimbursementAccount.isLoading === false) { + if (reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && isReimbursementAccountLoading === false) { setShouldShowContinueSetupButton(getShouldShowContinueSetupButtonInitialValue()); setHasACHDataBeenLoaded(true); } @@ -415,7 +418,7 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol } }; - 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 && _.contains( From 6976dafde82668a32d3815d19cecfdcc2d5c3920 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 17 Apr 2024 14:19:43 +0800 Subject: [PATCH 2/2] remove unnecessary null safety --- src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx index 548a3de1967f..5950cc796e48 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx @@ -243,10 +243,10 @@ function ReimbursementAccountPage({ }, []); // The empty dependency array ensures this runs only once after the component mounts. useEffect(() => { - if (typeof reimbursementAccount?.isLoading !== 'boolean' || reimbursementAccount?.isLoading === prevIsReimbursementAccountLoading) { + if (typeof reimbursementAccount?.isLoading !== 'boolean' || reimbursementAccount.isLoading === prevIsReimbursementAccountLoading) { return; } - setIsReimbursementAccountLoading(reimbursementAccount?.isLoading); + setIsReimbursementAccountLoading(reimbursementAccount.isLoading); }, [prevIsReimbursementAccountLoading, reimbursementAccount?.isLoading]); useEffect(