Get rid of IS_LOADING_REPORT_DATA Onyx flag

src/ONYXKEYS.ts

@@ -307,9 +307,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',
 
@@ -1107,7 +1104,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,17 @@
+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});
+
+    return useMemo(() => req?.some((request) => commands.includes(request.command) && !request.initiatedOffline) ?? false, [req, commands]);
+}

src/hooks/useLoadingBarVisibility.ts

@@ -1,27 +1,26 @@
 import {WRITE_COMMANDS} from '@libs/API/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import useNetwork from './useNetwork';
+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, 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
+ *
+ * @returns boolean indicating if the loading bar should be visible
  */
 export default function useLoadingBarVisibility(): boolean {
-    const [persistedRequests] = useOnyx(ONYXKEYS.PERSISTED_REQUESTS, {canBeMissing: false});
-    const [ongoingRequests] = useOnyx(ONYXKEYS.PERSISTED_ONGOING_REQUESTS, {canBeMissing: false});
+    const hasRelevantCommands = useCommandsLoading(LOADING_BAR_COMMANDS);
     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;
+    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,23 +57,22 @@
 
 let allPolicies: OnyxCollection<Policy>;
 let activePolicyId: OnyxEntry<string>;
-let isLoadingReportData = true;
+let hasLoadedApp = false;
 
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY,
     waitForCollectionCallback: true,
     callback: (value) => (allPolicies = value),
 });
 
 Onyx.connect({
     key: ONYXKEYS.NVP_ACTIVE_POLICY_ID,
     callback: (value) => (activePolicyId = value),
 });
 
 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),
 });
 
 /**
@@ -1300,7 +1299,7 @@
         return false;
     }
 
-    return !isPolicyAccessible(policy) && !isLoadingReportData;
+    return !isPolicyAccessible(policy) && hasLoadedApp;
 }
 
 function hasOtherControlWorkspaces(currentPolicyID: string) {

src/libs/actions/App.ts

@@ -43,7 +43,7 @@
 
 let currentUserAccountID: number | undefined;
 let currentUserEmail: string;
 Onyx.connect({
     key: ONYXKEYS.SESSION,
     callback: (val) => {
         currentUserAccountID = val?.accountID;
@@ -52,14 +52,14 @@
 });
 
 let isSidebarLoaded: boolean | undefined;
 Onyx.connect({
     key: ONYXKEYS.IS_SIDEBAR_LOADED,
     callback: (val) => (isSidebarLoaded = val),
     initWithStoredValues: false,
 });
 
 let preferredLocale: Locale | undefined;
 Onyx.connect({
     key: ONYXKEYS.NVP_PREFERRED_LOCALE,
     callback: (val) => {
         if (!val || !isSupportedLocale(val)) {
@@ -79,7 +79,7 @@
 });
 
 let priorityMode: ValueOf<typeof CONST.PRIORITY_MODE> | undefined;
 Onyx.connect({
     key: ONYXKEYS.NVP_PRIORITY_MODE,
     callback: (nextPriorityMode) => {
         // When someone switches their priority mode we need to fetch all their chats because only #focus mode works with a subset of a user's chats. This is only possible via the OpenApp command.
@@ -92,7 +92,7 @@
 });
 
 let isUsingImportedState: boolean | undefined;
 Onyx.connect({
     key: ONYXKEYS.IS_USING_IMPORTED_STATE,
     callback: (value) => {
         isUsingImportedState = value ?? false;
@@ -100,7 +100,7 @@
 });
 
 let preservedUserSession: OnyxTypes.Session | undefined;
 Onyx.connect({
     key: ONYXKEYS.PRESERVED_USER_SESSION,
     callback: (value) => {
         preservedUserSession = value;
@@ -108,7 +108,7 @@
 });
 
 let preservedShouldUseStagingServer: boolean | undefined;
 Onyx.connect({
     key: ONYXKEYS.ACCOUNT,
     callback: (value) => {
         preservedShouldUseStagingServer = value?.shouldUseStagingServer;
@@ -264,21 +264,9 @@
  */
 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 type {OnboardingCompanySize} 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,6 +4,7 @@ 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';
@@ -42,7 +43,7 @@ export default function <TProps extends WithReportAndReportActionOrNotFoundProps
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(report?.parentReportID)}`, {canBeMissing: true});
         const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${props.route.params.reportID}`, {canBeMissing: true});
-        const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {canBeMissing: true});
+        const isLoadingReportData = useReportDataLoading();
         const [betas] = useOnyx(ONYXKEYS.BETAS, {canBeMissing: false});
         const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${props.route.params.reportID}`, {canEvict: false, canBeMissing: true});
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing

src/pages/home/report/withReportOrNotFound.tsx

@@ -5,6 +5,7 @@ import React, {useEffect} 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 {openReport} from '@libs/actions/Report';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
@@ -67,7 +68,7 @@ export default function (
             const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${props.route.params.reportID}`, {canBeMissing: true});
             const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`, {canBeMissing: true});
             const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${props.route.params.reportID}`, {canBeMissing: true});
-            const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {canBeMissing: true});
+            const isLoadingReportData = useReportDataLoading();
             const isFocused = useIsFocused();
             const contentShown = React.useRef(false);
             const isReportIdInRoute = !!props.route.params.reportID?.length;

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

@@ -19,6 +19,7 @@
 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,10 +57,10 @@
     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, showDelegateNoAccessModal} = useContext(DelegateNoAccessContext);
     const isLoadingOnyxValues = isLoadingOnyxValue(loginListResult, sessionResult, myDomainSecurityGroupsResult, securityGroupsResult, isLoadingReportDataResult);
     const {isAccountLocked, showLockedAccountModal} = useContext(LockedAccountContext);
 
     const {formatPhoneNumber, translate} = useLocalize();

src/pages/workspace/AccessOrNotFoundWrapper.tsx

@@ -7,6 +7,7 @@ import type {FullPageNotFoundViewProps} from '@components/BlockingViews/FullPage
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useNetwork from '@hooks/useNetwork';
+import useReportDataLoading from '@hooks/useReportDataLoading';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import {openWorkspace} from '@libs/actions/Policy/Policy';
 import {isValidMoneyRequestType} from '@libs/IOUUtils';
@@ -131,7 +132,7 @@ function AccessOrNotFoundWrapper({
     const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {
         canBeMissing: true,
     });
-    const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {initialValue: true, canBeMissing: true});
+    const isLoadingReportData = useReportDataLoading();
     const {login = ''} = useCurrentUserPersonalDetails();
     const isPolicyIDInRoute = !!policyID?.length;
     const isMoneyRequest = !!iouType && isValidMoneyRequestType(iouType);
@@ -149,7 +150,7 @@ function AccessOrNotFoundWrapper({
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [isPolicyIDInRoute, policyID]);
 
-    const shouldShowFullScreenLoadingIndicator = !isMoneyRequest && isLoadingReportData !== false && (!Object.entries(policy ?? {}).length || !policy?.id);
+    const shouldShowFullScreenLoadingIndicator = !isMoneyRequest && isLoadingReportData && (!Object.entries(policy ?? {}).length || !policy?.id);
 
     const isFeatureEnabled = featureName ? isPolicyFeatureEnabledUtil(policy, featureName) : true;
 

src/pages/workspace/withPolicyAndFullscreenLoading.tsx

@@ -4,6 +4,7 @@ import React, {forwardRef} 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 ONYXKEYS from '@src/ONYXKEYS';
 import type {PersonalDetailsList} from '@src/types/onyx';
 import type {WithPolicyOnyxProps, WithPolicyProps} from './withPolicy';
@@ -35,8 +36,8 @@ export default function withPolicyAndFullscreenLoading<TProps extends WithPolicy
         }: Omit<TProps, keyof WithPolicyAndFullscreenLoadingOnyxProps>,
         ref: ForwardedRef<TRef>,
     ) {
-        const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {initialValue: true});
-        const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+        const isLoadingReportData = useReportDataLoading();
+        const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: true});
 
         if ((isLoadingPolicy || isLoadingReportData) && isEmpty(policy) && isEmpty(policyDraft)) {
             return <FullscreenLoadingIndicator />;

tests/perf-test/SidebarLinks.perf-test.tsx

@@ -85,7 +85,6 @@ describe('SidebarLinks', () => {
             [ONYXKEYS.PERSONAL_DETAILS_LIST]: LHNTestUtils.fakePersonalDetails,
             [ONYXKEYS.BETAS]: [CONST.BETAS.DEFAULT_ROOMS],
             [ONYXKEYS.NVP_PRIORITY_MODE]: CONST.PRIORITY_MODE.GSD,
-            [ONYXKEYS.IS_LOADING_REPORT_DATA]: false,
             ...mockedResponseMap,
         });
 
@@ -108,7 +107,6 @@ describe('SidebarLinks', () => {
             [ONYXKEYS.PERSONAL_DETAILS_LIST]: LHNTestUtils.fakePersonalDetails,
             [ONYXKEYS.BETAS]: [CONST.BETAS.DEFAULT_ROOMS],
             [ONYXKEYS.NVP_PRIORITY_MODE]: CONST.PRIORITY_MODE.GSD,
-            [ONYXKEYS.IS_LOADING_REPORT_DATA]: false,
             ...mockedResponseMap,
         });
 

tests/unit/ReportActionItemSingleTest.ts

@@ -9,7 +9,6 @@ import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatch
 
 const ONYXKEYS = {
     PERSONAL_DETAILS_LIST: 'personalDetailsList',
-    IS_LOADING_REPORT_DATA: 'isLoadingReportData',
     COLLECTION: {
         REPORT_ACTIONS: 'reportActions_',
         POLICY: 'policy_',
@@ -60,7 +59,6 @@ describe('ReportActionItemSingle', () => {
                     .then(() =>
                         Onyx.multiSet({
                             [ONYXKEYS.PERSONAL_DETAILS_LIST]: fakePersonalDetails,
-                            [ONYXKEYS.IS_LOADING_REPORT_DATA]: false,
                             ...policyCollectionDataSet,
                         }),
                     )