Merge pull request Expensify#89060 from callstack-internal/perf/defer-secondary-actions

perf: Defer mount of "More" button in Report

Author: rlinoz

src/components/MoneyReportHeaderActions/MoneyReportHeaderSecondaryActions.tsx

@@ -2,13 +2,15 @@ import {delegateEmailSelector, isUserValidatedSelector} from '@selectors/Account
 import {hasSeenTourSelector} from '@selectors/Onboarding';
 import truncate from 'lodash/truncate';
 import React, {useContext, useEffect} from 'react';
-import {InteractionManager} from 'react-native';
+import {InteractionManager, View} from 'react-native';
 import type {ValueOf} from 'type-fest';
+import Button from '@components/Button';
 import type {ButtonWithDropdownMenuRef} from '@components/ButtonWithDropdownMenu/types';
 import {useDelegateNoAccessActions, useDelegateNoAccessState} from '@components/DelegateNoAccessModalProvider';
 import {KYCWallContext} from '@components/KYCWall/KYCWallContext';
 import MoneyReportHeaderKYCDropdown from '@components/MoneyReportHeaderKYCDropdown';
 import {useMoneyReportHeaderModals} from '@components/MoneyReportHeaderModalsContext';
+import NavigationDeferredMount from '@components/NavigationDeferredMount';
 import {usePaymentAnimationsContext} from '@components/PaymentAnimationsContext';
 import type {PopoverMenuItem} from '@components/PopoverMenu';
 import {useSearchStateContext} from '@components/Search/SearchContext';
@@ -30,7 +32,10 @@ import usePaymentOptions from '@hooks/usePaymentOptions';
 import usePermissions from '@hooks/usePermissions';
 import usePolicy from '@hooks/usePolicy';
 import useReportIsArchived from '@hooks/useReportIsArchived';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSearchShouldCalculateTotals from '@hooks/useSearchShouldCalculateTotals';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useTransactionsAndViolationsForReport from '@hooks/useTransactionsAndViolationsForReport';
 import {generateDefaultWorkspaceName} from '@libs/actions/Policy/Policy';
 import {search} from '@libs/actions/Search';
@@ -394,15 +399,45 @@ function MoneyReportHeaderSecondaryActionsInner({reportID, primaryAction, isRepo
     );
 }
 
+function MoneyReportHeaderSecondaryActionsPlaceholder({primaryAction}: {primaryAction: ValueOf<typeof CONST.REPORT.PRIMARY_ACTIONS> | ''}) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const {translate} = useLocalize();
+    const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
+    const icons = useMemoizedLazyExpensifyIcons(['DownArrow']);
+    const shouldDisplayNarrowVersion = shouldUseNarrowLayout || isMediumScreenWidth;
+    const wrapperStyle = shouldDisplayNarrowVersion && !primaryAction ? styles.flex1 : undefined;
+    // Match the inner styles the real ButtonWithDropdownMenu applies when isSplitButton=false so text placement stays put on swap.
+    const innerStyles = [StyleUtils.getDropDownButtonHeight(CONST.DROPDOWN_BUTTON_SIZE.MEDIUM), styles.dropDownButtonCartIconView];
+    return (
+        <View style={wrapperStyle}>
+            <Button
+                text={translate('common.more')}
+                iconRight={icons.DownArrow}
+                shouldShowRightIcon
+                innerStyles={innerStyles}
+                onPress={() => {}}
+            />
+        </View>
+    );
+}
+
 function MoneyReportHeaderSecondaryActions({reportID, primaryAction, isReportInSearch, backTo, dropdownMenuRef}: MoneyReportHeaderSecondaryActionsProps) {
     return (
-        <MoneyReportHeaderSecondaryActionsInner
-            reportID={reportID}
-            primaryAction={primaryAction}
-            isReportInSearch={isReportInSearch}
-            backTo={backTo}
-            dropdownMenuRef={dropdownMenuRef}
-        />
+        <NavigationDeferredMount
+            placeholder={<MoneyReportHeaderSecondaryActionsPlaceholder primaryAction={primaryAction} />}
+            // RHPReportScreen remounts this tree on setParams arrow-nav without firing a transition,
+            // so we must not wait for one — see https://github.com/Expensify/App/issues/88931.
+            waitForUpcomingTransition={false}
+        >
+            <MoneyReportHeaderSecondaryActionsInner
+                reportID={reportID}
+                primaryAction={primaryAction}
+                isReportInSearch={isReportInSearch}
+                backTo={backTo}
+                dropdownMenuRef={dropdownMenuRef}
+            />
+        </NavigationDeferredMount>
     );
 }
 

src/components/NavigationDeferredMount.tsx

@@ -1,35 +1,44 @@
-import {startTransition, useEffect, useState} from 'react';
+import {startTransition, useEffect, useRef, useState} from 'react';
 import type {ReactNode} from 'react';
 import TransitionTracker from '@libs/Navigation/TransitionTracker';
 
 type NavigationDeferredMountProps = {
     /** Shown until `children` hydrate. Render something cheap with stable sizing to avoid layout jumps. */
     placeholder?: ReactNode;
 
-    /** The tree to defer. Mounted as a non-urgent transition after the in-flight (or upcoming) navigation transition ends. */
+    /** The tree to defer. Mounted as a non-urgent transition after any active navigation transition ends. */
     children: ReactNode;
+
+    /**
+     * If true, additionally waits for the next navigation transition to start (and then complete) before mounting.
+     * This is the natural mode for screens reached via real navigation (push/replace) — the placeholder stays
+     * up through the full animation. Default: true.
+     *
+     * Pass `false` when the consumer can be remounted by a parent without a navigation transition firing
+     * (e.g. a parent that uses `key={someParam}` and changes the key via `setParams`). In that case, the
+     * upcoming transition never starts and the safety timeout would make the placeholder visible (and
+     * unresponsive) for up to `MAX_TRANSITION_START_WAIT_MS`.
+     */
+    waitForUpcomingTransition?: boolean;
 };
 
 /**
  * Gates a heavy subtree behind navigation transition completion via `TransitionTracker`, so the tree
- * hydrates only after the nav animation has finished. The swap is wrapped in `startTransition` so React
- * treats the hydrate as non-urgent and can yield to user input.
+ * hydrates only after any in-flight nav animation has finished. The swap is wrapped in `startTransition`
+ * so React treats the hydrate as non-urgent and can yield to user input.
  *
  * Use it for: heavy subtrees that mount as part of a navigation transition (report headers, page-level
  * actions, dropdowns rendered on a freshly navigated screen) where the hydrate risks competing with the
  * nav animation frame budget.
- *
- * Do NOT use it for: subtrees that mount in response to user interaction after navigation has settled
- * (modals, accordions, popovers opened on tap). If no transition is in flight or upcoming, this component
- * waits for the `MAX_TRANSITION_START_WAIT_MS` safety timeout before hydrating, which adds latency with
- * no benefit outside navigation contexts.
  */
-function NavigationDeferredMount({placeholder = null, children}: NavigationDeferredMountProps): ReactNode {
+function NavigationDeferredMount({placeholder = null, children, waitForUpcomingTransition = true}: NavigationDeferredMountProps): ReactNode {
     const [isReady, setIsReady] = useState(false);
+    // One-shot mount-time config — flipping the prop after mount shouldn't retrigger the wait.
+    const waitForUpcomingTransitionRef = useRef(waitForUpcomingTransition);
 
     useEffect(() => {
         const handle = TransitionTracker.runAfterTransitions({
-            waitForUpcomingTransition: true,
+            waitForUpcomingTransition: waitForUpcomingTransitionRef.current,
             callback: () => startTransition(() => setIsReady(true)),
         });
         return () => handle.cancel();