General wrapper hook & dedicated hooks

Author: martasudol

src/components/MoneyReportHeader.tsx

@@ -10,7 +10,7 @@ import useNetwork from '@hooks/useNetwork';
 import usePaymentAnimations from '@hooks/usePaymentAnimations';
 import usePaymentOptions from '@hooks/usePaymentOptions';
 import usePermissions from '@hooks/usePermissions';
-import useReportDataLoading from '@hooks/useReportDataLoading';
+import useLoadingBarVisibility from '@hooks/useLoadingBarVisibility';
 import useReportIsArchived from '@hooks/useReportIsArchived';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSelectedTransactionsActions from '@hooks/useSelectedTransactionsActions';
@@ -298,7 +298,7 @@ function MoneyReportHeader({
     const isAnyTransactionOnHold = hasHeldExpensesReportUtils(moneyRequestReport?.reportID);
     const {isDelegateAccessRestricted} = useDelegateUserDetails();
     const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
-    const shouldShowLoadingBar = useReportDataLoading();
+    const shouldShowLoadingBar = useLoadingBarVisibility();
 
     const isReportInRHP = route.name === SCREENS.SEARCH.REPORT_RHP;
     const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth;

src/components/MoneyRequestHeader.tsx

@@ -7,7 +7,7 @@ import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
-import useReportDataLoading from '@hooks/useReportDataLoading';
+import useLoadingBarVisibility from '@hooks/useLoadingBarVisibility';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -84,7 +84,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
     const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
     const [downloadErrorModalVisible, setDownloadErrorModalVisible] = useState(false);
     const [dismissedHoldUseExplanation, dismissedHoldUseExplanationResult] = useOnyx(ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION, {initialValue: true, canBeMissing: false});
-    const shouldShowLoadingBar = useReportDataLoading();
+    const shouldShowLoadingBar = useLoadingBarVisibility();
     const isLoadingHoldUseExplained = isLoadingOnyxValue(dismissedHoldUseExplanationResult);
     const styles = useThemeStyles();
     const theme = useTheme();

src/components/Navigation/TopBar.tsx

@@ -7,7 +7,7 @@ import SearchButton from '@components/Search/SearchRouter/SearchButton';
 import HelpButton from '@components/SidePanel/HelpComponents/HelpButton';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
-import useReportDataLoading from '@hooks/useReportDataLoading';
+import useLoadingBarVisibility from '@hooks/useLoadingBarVisibility';
 import useThemeStyles from '@hooks/useThemeStyles';
 import SignInButton from '@pages/home/sidebar/SignInButton';
 import {isAnonymousUser as isAnonymousUserUtil} from '@userActions/Session';
@@ -26,7 +26,7 @@ function TopBar({breadcrumbLabel, shouldDisplaySearch = true, shouldDisplayHelpB
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [session] = useOnyx(ONYXKEYS.SESSION, {selector: (sessionValue) => sessionValue && {authTokenType: sessionValue.authTokenType}, canBeMissing: true});
-    const shouldShowLoadingBarForReports = useReportDataLoading();
+    const shouldShowLoadingBarForReports = useLoadingBarVisibility();
     const isAnonymousUser = isAnonymousUserUtil(session);
 
     const displaySignIn = isAnonymousUser;

src/components/PriorityModeController.tsx

@@ -25,7 +25,7 @@ import FocusModeNotification from './FocusModeNotification';
  */
 export default function PriorityModeController() {
     const [accountID] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.accountID, canBeMissing: true});
-    const isLoadingReportData = useReportDataLoading(false);
+    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});

src/hooks/useCommandsLoading.ts

@@ -0,0 +1,21 @@
+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

@@ -0,0 +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 loading bar visibility
+const LOADING_BAR_COMMANDS = [WRITE_COMMANDS.OPEN_APP, WRITE_COMMANDS.RECONNECT_APP, WRITE_COMMANDS.OPEN_REPORT];
+
+/**
+ * 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 [network] = useOnyx(ONYXKEYS.NETWORK, {canBeMissing: false});
+    const hasRelevantCommands = useCommandsLoading(LOADING_BAR_COMMANDS);
+    
+    // Loading bar should not be shown when offline since users can't interact with loading content
+    if (network?.isOffline) {
+        return false;
+    }
+    
+    return hasRelevantCommands;
+}

src/hooks/useReportDataLoading.ts

@@ -1,30 +1,18 @@
 import {WRITE_COMMANDS} from '@libs/API/types';
-import ONYXKEYS from '@src/ONYXKEYS';
-import useOnyx from './useOnyx';
+import useCommandsLoading from './useCommandsLoading';
 
-// Commands that should trigger loading states
-const RELEVANT_COMMANDS = new Set<string>([WRITE_COMMANDS.OPEN_APP, WRITE_COMMANDS.RECONNECT_APP, WRITE_COMMANDS.OPEN_REPORT]);
+// 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.
+ * that trigger report data fetching from the server. This hook ignores offline state
+ * and is primarily used for full-screen loading indicators.
  *
- * @param respectOfflineState - If true (default), won't show loading when offline (for loading bars).
- *                            If false, shows loading regardless of offline state (for full-screen loading).
+ * @returns boolean indicating if report data is currently loading
  */
-export default function useReportDataLoading(respectOfflineState = true): boolean {
-    const [req] = useOnyx(ONYXKEYS.PERSISTED_REQUESTS, {canBeMissing: false});
-    const [network] = useOnyx(ONYXKEYS.NETWORK, {canBeMissing: false});
-
-    const hasRelevantRequests = req?.some((request) => RELEVANT_COMMANDS.has(request.command) && !request.initiatedOffline) ?? false;
-
-    // For loading bars, respect offline state (don't show when offline)
-    // For full-screen loading, ignore offline state
-    if (respectOfflineState && network?.isOffline) {
-        return false;
-    }
-
-    return hasRelevantRequests;
+export default function useReportDataLoading(): boolean {
+    return useCommandsLoading(REPORT_DATA_COMMANDS);
 }

src/pages/ConciergePage.tsx

@@ -24,7 +24,7 @@ function ConciergePage() {
     const styles = useThemeStyles();
     const isUnmounted = useRef(false);
     const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false});
-    const isLoadingReportData = useReportDataLoading(false);
+    const isLoadingReportData = useReportDataLoading();
     const route = useRoute();
 
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED, {canBeMissing: true});

src/pages/home/HeaderView.tsx

@@ -26,7 +26,7 @@ import Tooltip from '@components/Tooltip';
 import useHasTeam2025Pricing from '@hooks/useHasTeam2025Pricing';
 import useLocalize from '@hooks/useLocalize';
 import usePolicy from '@hooks/usePolicy';
-import useReportDataLoading from '@hooks/useReportDataLoading';
+import useLoadingBarVisibility from '@hooks/useLoadingBarVisibility';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSubscriptionPlan from '@hooks/useSubscriptionPlan';
 import useTheme from '@hooks/useTheme';
@@ -112,7 +112,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 shouldShowLoadingBar = useReportDataLoading();
+    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});

src/pages/home/report/withReportAndReportActionOrNotFound.tsx

@@ -42,7 +42,7 @@ export default function <TProps extends WithReportAndReportActionOrNotFoundProps
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         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(false);
+        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});