Merge pull request Expensify#46563 from dominictb/fix/45517-accounting

fix: update logic to show loading indicator in accounting page
kmbcook · Aug 5, 2024 · 492e14d · 492e14d
2 parents 41a84a0 + 41ce85d
commit 492e14d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/src/libs/actions/PolicyConnections.ts b/src/libs/actions/PolicyConnections.ts
@@ -8,13 +8,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 function openPolicyAccountingPage(policyID: string) {
     const hasConnectionsDataBeenFetchedKey = `${ONYXKEYS.COLLECTION.POLICY_HAS_CONNECTIONS_DATA_BEEN_FETCHED}${policyID}` as const;
 
-    const optimisticData: OnyxUpdate[] = [
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: hasConnectionsDataBeenFetchedKey,
-            value: false,
-        },
-    ];
     const successData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
@@ -35,7 +28,6 @@ function openPolicyAccountingPage(policyID: string) {
     };
 
     API.read(READ_COMMANDS.OPEN_POLICY_ACCOUNTING_PAGE, parameters, {
-        optimisticData,
         successData,
         failureData,
     });

diff --git a/src/pages/workspace/withPolicyConnections.tsx b/src/pages/workspace/withPolicyConnections.tsx
@@ -1,8 +1,10 @@
-import React, {useEffect} from 'react';
+import isBoolean from 'lodash/isBoolean';
+import React, {useEffect, useState} from 'react';
 import type {ComponentType} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import useNetwork from '@hooks/useNetwork';
+import usePrevious from '@hooks/usePrevious';
 import {openPolicyAccountingPage} from '@libs/actions/PolicyConnections';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
@@ -30,19 +32,30 @@ function withPolicyConnections<TProps extends WithPolicyConnectionsProps>(Wrappe
             initWithStoredValues: false,
         });
         const isConnectionDataFetchNeeded =
-            !isOffline && props.policy && (!!props.policy.areConnectionsEnabled || !isEmptyObject(props.policy.connections)) && !hasConnectionsDataBeenFetched;
+            !isOffline && !!props.policy && (!!props.policy.areConnectionsEnabled || !isEmptyObject(props.policy.connections)) && !hasConnectionsDataBeenFetched;
+
+        const [isFetchingData, setIsFetchingData] = useState(false);
+
+        const prevHasConnectionsDataBeenFetched = usePrevious(hasConnectionsDataBeenFetched);
+
+        useEffect(() => {
+            if (prevHasConnectionsDataBeenFetched !== undefined || !isBoolean(hasConnectionsDataBeenFetched)) {
+                return;
+            }
+            setIsFetchingData(false);
+        }, [hasConnectionsDataBeenFetched, prevHasConnectionsDataBeenFetched]);
 
         useEffect(() => {
             // When the accounting feature is not enabled, or if the connections data already exists,
             // there is no need to fetch the connections data.
             if (!isConnectionDataFetchNeeded || !props.policy?.id) {
                 return;
             }
-
+            setIsFetchingData(true);
             openPolicyAccountingPage(props.policy.id);
         }, [props.policy?.id, isConnectionDataFetchNeeded]);
 
-        if (isConnectionDataFetchNeeded && shouldBlockView) {
+        if ((isConnectionDataFetchNeeded || isFetchingData) && shouldBlockView) {
             return <FullScreenLoadingIndicator />;
         }