Get rid of IS_LOADING_REPORT_DATA Onyx flag

src/ONYXKEYS.ts

@@ -296,9 +296,6 @@ const ONYXKEYS = {
     /** Set when we are loading payment methods */
     IS_LOADING_PAYMENT_METHODS: 'isLoadingPaymentMethods',
 
-    /** Is report data loading? */
-    IS_LOADING_REPORT_DATA: 'isLoadingReportData',
-
     /** Is report data loading? */
     IS_LOADING_APP: 'isLoadingApp',
 
@@ -1085,7 +1082,6 @@ type OnyxValuesMapping = {
     [ONYXKEYS.FREQUENTLY_USED_EMOJIS]: OnyxTypes.FrequentlyUsedEmoji[];
     [ONYXKEYS.REIMBURSEMENT_ACCOUNT_WORKSPACE_ID]: string;
     [ONYXKEYS.IS_LOADING_PAYMENT_METHODS]: boolean;
-    [ONYXKEYS.IS_LOADING_REPORT_DATA]: boolean;
     [ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN]: boolean;
     [ONYXKEYS.APP_PROFILING_IN_PROGRESS]: boolean;
     [ONYXKEYS.IS_LOADING_APP]: boolean;

src/components/PriorityModeController.tsx

@@ -1,6 +1,7 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useOnyx} from 'react-native-onyx';
+import useReportDataLoading from '@hooks/useReportDataLoading';
 import {updateChatPriorityMode} from '@libs/actions/User';
 import getIsNarrowLayout from '@libs/getIsNarrowLayout';
 import Log from '@libs/Log';
@@ -24,7 +25,7 @@ import FocusModeNotification from './FocusModeNotification';
  */
 export default function PriorityModeController() {
     const [accountID] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.accountID, canBeMissing: true});
-    const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {canBeMissing: true});
+    const isLoadingReportData = useReportDataLoading();
     const [isInFocusMode] = useOnyx(ONYXKEYS.NVP_PRIORITY_MODE, {selector: (priorityMode) => priorityMode === CONST.PRIORITY_MODE.GSD, canBeMissing: true});
     const [hasTriedFocusMode] = useOnyx(ONYXKEYS.NVP_TRY_FOCUS_MODE, {canBeMissing: true});
     const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: true});
@@ -50,7 +51,7 @@ export default function PriorityModeController() {
     // Listen for state changes and trigger the #focus mode when appropriate
     useEffect(() => {
         // Wait for Onyx state to fully load
-        if (isLoadingReportData !== false || isInFocusMode === undefined || hasTriedFocusMode === undefined || !accountID) {
+        if (isLoadingReportData || isInFocusMode === undefined || hasTriedFocusMode === undefined || !accountID) {
             return;
         }
 

src/hooks/useCommandsLoading.ts

@@ -0,0 +1,19 @@
+import {useMemo} from 'react';
+import ONYXKEYS from '@src/ONYXKEYS';
+import useOnyx from './useOnyx';
+
+/**
+ * Hook that determines if any of the specified commands are currently being processed
+ *
+ * Monitors persisted requests queue for the provided commands that are not initiated offline.
+ *
+ * @param commands - Array of command strings to monitor
+ * @returns boolean indicating if any of the specified commands are currently loading
+ */
+export default function useCommandsLoading(commands: string[]): boolean {
+    const [req] = useOnyx(ONYXKEYS.PERSISTED_REQUESTS, {canBeMissing: false});
+
+    const commandsSet = useMemo(() => new Set(commands), [commands]);
+
+    return req?.some((request) => commandsSet.has(request.command) && !request.initiatedOffline) ?? false;
+}

src/hooks/useLoadingBarVisibility.ts

@@ -1,22 +1,28 @@
 import {WRITE_COMMANDS} from '@libs/API/types';
 import ONYXKEYS from '@src/ONYXKEYS';
+import useCommandsLoading from './useCommandsLoading';
 import useOnyx from './useOnyx';
 
-// Commands that should trigger the LoadingBar to show
-const RELEVANT_COMMANDS = new Set<string>([WRITE_COMMANDS.OPEN_APP, WRITE_COMMANDS.RECONNECT_APP, WRITE_COMMANDS.OPEN_REPORT]);
+// Commands that should trigger loading bar visibility
+const LOADING_BAR_COMMANDS = [WRITE_COMMANDS.OPEN_APP, WRITE_COMMANDS.RECONNECT_APP, WRITE_COMMANDS.OPEN_REPORT];
 
 /**
- * Hook that determines whether LoadingBar should be visible based on active queue requests
- * Shows LoadingBar when OpenReport/OpenApp/ReconnectApp requests are being processed
+ * Hook that determines when the loading bar should be visible
+ *
+ * Monitors persisted requests queue for OpenApp, ReconnectApp, and OpenReport commands
+ * that trigger report data fetching from the server. The loading bar is hidden when offline
+ * to provide better UX since users can't interact with loading content while offline.
+ *
+ * @returns boolean indicating if the loading bar should be visible
  */
 export default function useLoadingBarVisibility(): boolean {
-    const [req] = useOnyx(ONYXKEYS.PERSISTED_REQUESTS, {canBeMissing: false});
     const [network] = useOnyx(ONYXKEYS.NETWORK, {canBeMissing: false});
+    const hasRelevantCommands = useCommandsLoading(LOADING_BAR_COMMANDS);
 
-    // Don't show loading bar if currently offline
+    // Loading bar should not be shown when offline since users can't interact with loading content
     if (network?.isOffline) {
         return false;
     }
 
-    return req?.some((request) => RELEVANT_COMMANDS.has(request.command) && !request.initiatedOffline) ?? false;
+    return hasRelevantCommands;
 }

src/hooks/useReportDataLoading.ts

@@ -0,0 +1,18 @@
+import {WRITE_COMMANDS} from '@libs/API/types';
+import useCommandsLoading from './useCommandsLoading';
+
+// Commands that should trigger report data loading states
+const REPORT_DATA_COMMANDS = [WRITE_COMMANDS.OPEN_APP, WRITE_COMMANDS.RECONNECT_APP, WRITE_COMMANDS.OPEN_REPORT];
+
+/**
+ * Hook that determines if report data is currently being loaded
+ *
+ * Monitors persisted requests queue for OpenApp, ReconnectApp, and OpenReport commands
+ * that trigger report data fetching from the server. This hook ignores offline state
+ * and is primarily used for full-screen loading indicators.
+ *
+ * @returns boolean indicating if report data is currently loading
+ */
+export default function useReportDataLoading(): boolean {
+    return useCommandsLoading(REPORT_DATA_COMMANDS);
+}

src/libs/PolicyUtils.ts

@@ -57,7 +57,7 @@ type ConnectionWithLastSyncData = {
 
 let allPolicies: OnyxCollection<Policy>;
 let activePolicyId: OnyxEntry<string>;
-let isLoadingReportData = true;
+let hasLoadedApp = false;
 
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY,
@@ -71,9 +71,8 @@ Onyx.connect({
 });
 
 Onyx.connect({
-    key: ONYXKEYS.IS_LOADING_REPORT_DATA,
-    initWithStoredValues: false,
-    callback: (value) => (isLoadingReportData = value ?? false),
+    key: ONYXKEYS.HAS_LOADED_APP,
+    callback: (value) => (hasLoadedApp = value ?? false),
 });
 
 /**
@@ -1296,7 +1295,7 @@ function shouldDisplayPolicyNotFoundPage(policyID: string): boolean {
         return false;
     }
 
-    return !isPolicyAccessible(policy) && !isLoadingReportData;
+    return !isPolicyAccessible(policy) && hasLoadedApp;
 }
 
 function hasOtherControlWorkspaces(currentPolicyID: string) {

src/libs/actions/App.ts

@@ -253,21 +253,9 @@ function getPolicyParamsForOpenOrReconnect(): Promise<PolicyParamsForOpenOrRecon
  */
 function getOnyxDataForOpenOrReconnect(isOpenApp = false, isFullReconnect = false, shouldKeepPublicRooms = false): OnyxData {
     const result: OnyxData = {
-        optimisticData: [
-            {
-                onyxMethod: Onyx.METHOD.MERGE,
-                key: ONYXKEYS.IS_LOADING_REPORT_DATA,
-                value: true,
-            },
-        ],
+        optimisticData: [],
         successData: [],
-        finallyData: [
-            {
-                onyxMethod: Onyx.METHOD.MERGE,
-                key: ONYXKEYS.IS_LOADING_REPORT_DATA,
-                value: false,
-            },
-        ],
+        finallyData: [],
         queueFlushedData: [
             {
                 onyxMethod: Onyx.METHOD.MERGE,

src/libs/actions/Welcome/index.ts

@@ -18,7 +18,6 @@ import {clearInitialPath} from './OnboardingFlow';
 
 type OnboardingData = Onboarding | undefined;
 
-let isLoadingReportData = true;
 let tryNewDotData: TryNewDot | undefined;
 let onboarding: OnboardingData;
 
@@ -62,17 +61,6 @@ function isOnboardingFlowCompleted({onCompleted, onNotCompleted, onCanceled}: Ha
     });
 }
 
-/**
- * Check if report data are loaded
- */
-function checkServerDataReady() {
-    if (isLoadingReportData) {
-        return;
-    }
-
-    resolveIsReadyPromise?.();
-}
-
 /**
  * Check if user completed HybridApp onboarding
  */
@@ -93,6 +81,7 @@ function checkOnboardingDataReady() {
     }
 
     resolveOnboardingFlowStatus();
+    resolveIsReadyPromise?.();
 }
 
 function setOnboardingPurposeSelected(value: OnboardingPurpose) {
@@ -169,15 +158,6 @@ Onyx.connect({
     },
 });
 
-Onyx.connect({
-    key: ONYXKEYS.IS_LOADING_REPORT_DATA,
-    initWithStoredValues: false,
-    callback: (value) => {
-        isLoadingReportData = value ?? false;
-        checkServerDataReady();
-    },
-});
-
 Onyx.connect({
     key: ONYXKEYS.NVP_TRY_NEW_DOT,
     callback: (value) => {
@@ -193,7 +173,6 @@ function resetAllChecks() {
     isOnboardingFlowStatusKnownPromise = new Promise<void>((resolve) => {
         resolveOnboardingFlowStatus = resolve;
     });
-    isLoadingReportData = true;
     isOnboardingInProgress = false;
     clearInitialPath();
 }

src/pages/ConciergePage.tsx

@@ -5,6 +5,7 @@ import {useOnyx} from 'react-native-onyx';
 import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
 import ReportHeaderSkeletonView from '@components/ReportHeaderSkeletonView';
 import ScreenWrapper from '@components/ScreenWrapper';
+import useReportDataLoading from '@hooks/useReportDataLoading';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {confirmReadyToOpenApp} from '@libs/actions/App';
 import {navigateToConciergeChat} from '@libs/actions/Report';
@@ -23,7 +24,7 @@ function ConciergePage() {
     const styles = useThemeStyles();
     const isUnmounted = useRef(false);
     const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false});
-    const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {initialValue: true, canBeMissing: true});
+    const isLoadingReportData = useReportDataLoading();
     const route = useRoute();
 
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED, {canBeMissing: true});
@@ -35,7 +36,7 @@ function ConciergePage() {
             if (session && 'authToken' in session) {
                 confirmReadyToOpenApp();
                 Navigation.isNavigationReady().then(() => {
-                    if (isUnmounted.current || isLoadingReportData === undefined || !!isLoadingReportData) {
+                    if (isUnmounted.current || isLoadingReportData) {
                         return;
                     }
 

src/pages/home/report/withReportAndReportActionOrNotFound.tsx

@@ -4,14 +4,14 @@ import React, {useEffect, useMemo} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import useReportDataLoading from '@hooks/useReportDataLoading';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import {openReport} from '@libs/actions/Report';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {FlagCommentNavigatorParamList, SplitDetailsNavigatorParamList} from '@libs/Navigation/types';
 import {canAccessReport} from '@libs/ReportUtils';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
@@ -38,16 +38,16 @@ export default function <TProps extends WithReportAndReportActionOrNotFoundProps
     WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
 ): ComponentType<TProps & RefAttributes<TRef>> {
     function WithReportOrNotFound(props: TProps, ref: ForwardedRef<TRef>) {
-        const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${props.route.params.reportID}`);
+        const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${props.route.params.reportID}`, {canBeMissing: true});
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID || CONST.DEFAULT_NUMBER_ID}`);
-        const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${props.route.params.reportID}`);
-        const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA);
-        const [betas] = useOnyx(ONYXKEYS.BETAS);
-        const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
-        const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${props.route.params.reportID}`, {canEvict: false});
+        const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`, {canBeMissing: true});
+        const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${props.route.params.reportID}`, {canBeMissing: true});
+        const isLoadingReportData = useReportDataLoading();
+        const [betas] = useOnyx(ONYXKEYS.BETAS, {canBeMissing: false});
+        const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {canBeMissing: true});
+        const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${props.route.params.reportID}`, {canEvict: false, canBeMissing: true});
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        const [parentReportAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report?.parentReportID || CONST.DEFAULT_NUMBER_ID}`, {
+        const [parentReportAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report?.parentReportID}`, {
             selector: (parentReportActions) => {
                 const parentReportActionID = report?.parentReportActionID;
                 if (!parentReportActionID) {
@@ -56,6 +56,7 @@ export default function <TProps extends WithReportAndReportActionOrNotFoundProps
                 return parentReportActions?.[parentReportActionID] ?? null;
             },
             canEvict: false,
+            canBeMissing: true,
         });
         const linkedReportAction = useMemo(() => {
             let reportAction: OnyxEntry<OnyxTypes.ReportAction> = reportActions?.[`${props.route.params.reportActionID}`];

src/pages/home/report/withReportOrNotFound.tsx

@@ -5,6 +5,7 @@ import React, {useEffect} from 'react';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import useReportDataLoading from '@hooks/useReportDataLoading';
 import {openReport} from '@libs/actions/Report';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
@@ -63,11 +64,11 @@ export default function (
 ): <TProps extends WithReportOrNotFoundProps, TRef>(WrappedComponent: React.ComponentType<TProps & React.RefAttributes<TRef>>) => React.ComponentType<TProps & React.RefAttributes<TRef>> {
     return function <TProps extends WithReportOrNotFoundProps, TRef>(WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>) {
         function WithReportOrNotFound(props: TProps, ref: ForwardedRef<TRef>) {
-            const [betas] = useOnyx(ONYXKEYS.BETAS);
-            const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
-            const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${props.route.params.reportID}`);
-            const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA);
-            const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${props.route.params.reportID}`);
+            const [betas] = useOnyx(ONYXKEYS.BETAS, {canBeMissing: false});
+            const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {canBeMissing: true});
+            const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${props.route.params.reportID}`, {canBeMissing: true});
+            const isLoadingReportData = useReportDataLoading();
+            const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${props.route.params.reportID}`, {canBeMissing: true});
             const isFocused = useIsFocused();
             const contentShown = React.useRef(false);
             const isReportIdInRoute = !!props.route.params.reportID?.length;
@@ -89,7 +90,7 @@ export default function (
             }, [shouldFetchReport, isReportLoaded, props.route.params.reportID]);
 
             if (shouldRequireReportID || isReportIdInRoute) {
-                const shouldShowFullScreenLoadingIndicator = !isReportLoaded && (isLoadingReportData !== false || shouldFetchReport);
+                const shouldShowFullScreenLoadingIndicator = !isReportLoaded && (isLoadingReportData || shouldFetchReport);
                 const shouldShowNotFoundPage = !isReportLoaded || !canAccessReport(report, policies, betas);
 
                 // If the content was shown, but it's not anymore, that means the report was deleted, and we are probably navigating out of this screen.

src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx

@@ -19,6 +19,7 @@ import ValidateCodeActionForm from '@components/ValidateCodeActionForm';
 import type {ValidateCodeFormHandle} from '@components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useReportDataLoading from '@hooks/useReportDataLoading';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -56,11 +57,11 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) {
     const [session, sessionResult] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true});
     const [myDomainSecurityGroups, myDomainSecurityGroupsResult] = useOnyx(ONYXKEYS.MY_DOMAIN_SECURITY_GROUPS, {canBeMissing: true});
     const [securityGroups, securityGroupsResult] = useOnyx(ONYXKEYS.COLLECTION.SECURITY_GROUP, {canBeMissing: true});
-    const [isLoadingReportData, isLoadingReportDataResult] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {initialValue: true, canBeMissing: true});
+    const isLoadingReportData = useReportDataLoading();
     const [isValidateCodeFormVisible, setIsValidateCodeFormVisible] = useState(true);
     const [isActingAsDelegate] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => !!account?.delegatedAccess?.delegate, canBeMissing: true});
     const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
-    const isLoadingOnyxValues = isLoadingOnyxValue(loginListResult, sessionResult, myDomainSecurityGroupsResult, securityGroupsResult, isLoadingReportDataResult);
+    const isLoadingOnyxValues = isLoadingOnyxValue(loginListResult, sessionResult, myDomainSecurityGroupsResult, securityGroupsResult);
     const {isAccountLocked, showLockedAccountModal} = useContext(LockedAccountContext);
 
     const {formatPhoneNumber, translate} = useLocalize();