diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 080f0829b26e..8f98b789b619 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -4,6 +4,7 @@ import {ActivityIndicator, InteractionManager, View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import {useOnyx} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; +import useLoadingBarVisibility from '@hooks/useLoadingBarVisibility'; import useLocalize from '@hooks/useLocalize'; import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; import useNetwork from '@hooks/useNetwork'; @@ -295,7 +296,7 @@ function MoneyReportHeader({ const {nonHeldAmount, fullAmount, hasValidNonHeldAmount} = getNonHeldAndFullAmount(moneyRequestReport, shouldShowPayButton); const isAnyTransactionOnHold = hasHeldExpensesReportUtils(moneyRequestReport?.reportID); const {isDelegateAccessRestricted, showDelegateNoAccessModal} = useContext(DelegateNoAccessContext); - const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {canBeMissing: true}); + const shouldShowLoadingBar = useLoadingBarVisibility(); const isReportInRHP = route.name === SCREENS.SEARCH.REPORT_RHP; const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth; @@ -997,7 +998,7 @@ function MoneyReportHeader({ )} )} - + {isHoldMenuVisible && requestType !== undefined && ( )} - + sessionValue && {authTokenType: sessionValue.authTokenType}, canBeMissing: true}); - const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {canBeMissing: true}); + const shouldShowLoadingBarForReports = useLoadingBarVisibility(); const isAnonymousUser = isAnonymousUserUtil(session); const displaySignIn = isAnonymousUser; @@ -63,7 +64,7 @@ function TopBar({breadcrumbLabel, shouldDisplaySearch = true, shouldDisplayHelpB {shouldDisplayHelpButton && } {displaySearch && } - + ); } diff --git a/src/hooks/useLoadingBarVisibility.ts b/src/hooks/useLoadingBarVisibility.ts new file mode 100644 index 000000000000..da07cae1c942 --- /dev/null +++ b/src/hooks/useLoadingBarVisibility.ts @@ -0,0 +1,27 @@ +import {WRITE_COMMANDS} from '@libs/API/types'; +import ONYXKEYS from '@src/ONYXKEYS'; +import useNetwork from './useNetwork'; +import useOnyx from './useOnyx'; + +// Commands that should trigger the LoadingBar to show +const RELEVANT_COMMANDS = new Set([WRITE_COMMANDS.OPEN_APP, WRITE_COMMANDS.RECONNECT_APP, WRITE_COMMANDS.OPEN_REPORT, WRITE_COMMANDS.READ_NEWEST_ACTION]); + +/** + * Hook that determines whether LoadingBar should be visible based on active queue requests + * Shows LoadingBar when any of the RELEVANT_COMMANDS are being processed + */ +export default function useLoadingBarVisibility(): boolean { + const [persistedRequests] = useOnyx(ONYXKEYS.PERSISTED_REQUESTS, {canBeMissing: false}); + const [ongoingRequests] = useOnyx(ONYXKEYS.PERSISTED_ONGOING_REQUESTS, {canBeMissing: false}); + const {isOffline} = useNetwork(); + + // Don't show loading bar if currently offline + if (isOffline) { + return false; + } + + const hasPersistedRequests = persistedRequests?.some((request) => RELEVANT_COMMANDS.has(request.command) && !request.initiatedOffline) ?? false; + const hasOngoingRequests = !!ongoingRequests && RELEVANT_COMMANDS.has(ongoingRequests?.command); + + return hasPersistedRequests || hasOngoingRequests; +} diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index b5a844dea00e..72b3cbe4dd03 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -24,6 +24,7 @@ import TaskHeaderActionButton from '@components/TaskHeaderActionButton'; import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; import useHasTeam2025Pricing from '@hooks/useHasTeam2025Pricing'; +import useLoadingBarVisibility from '@hooks/useLoadingBarVisibility'; import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; @@ -113,7 +114,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked, const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(report?.parentReportID) ?? getNonEmptyStringOnyxID(report?.reportID)}`, {canBeMissing: true}); const policy = usePolicy(report?.policyID); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: true}); - const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {canBeMissing: true}); + const shouldShowLoadingBar = useLoadingBarVisibility(); const [firstDayFreeTrial] = useOnyx(ONYXKEYS.NVP_FIRST_DAY_FREE_TRIAL, {canBeMissing: true}); const [lastDayFreeTrial] = useOnyx(ONYXKEYS.NVP_LAST_DAY_FREE_TRIAL, {canBeMissing: true}); const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true}); @@ -404,7 +405,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked, )} - + {shouldShowEarlyDiscountBanner && (