diff --git a/src/libs/actions/PolicyConnections.ts b/src/libs/actions/PolicyConnections.ts index 4ea65a79352b..27df8f792cb3 100644 --- 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 index dc228b65d1c4..127631bc5437 100644 --- 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,7 +32,18 @@ function withPolicyConnections(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, @@ -38,11 +51,11 @@ function withPolicyConnections(Wrappe if (!isConnectionDataFetchNeeded || !props.policy?.id) { return; } - + setIsFetchingData(true); openPolicyAccountingPage(props.policy.id); }, [props.policy?.id, isConnectionDataFetchNeeded]); - if (isConnectionDataFetchNeeded && shouldBlockView) { + if ((isConnectionDataFetchNeeded || isFetchingData) && shouldBlockView) { return ; }