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 && (