Merge pull request Expensify#88331 from callstack-internal/eliran-lazy-load-context-menu

lazy load context menu

Author: roryabraham

index.js

@@ -3,6 +3,7 @@
  */
 // import of polyfills should always be first
 import './src/polyfills/PromiseWithResolvers';
+import './src/polyfills/requestIdleCallback';
 import {AppRegistry} from 'react-native';
 import App from './src/App';
 import Config from './src/CONFIG';

jest/setup.ts

@@ -13,6 +13,7 @@ import type Animated from 'react-native-reanimated';
 import 'setimmediate';
 import {TextDecoder, TextEncoder} from 'util';
 import '@src/polyfills/PromiseWithResolvers';
+import '@src/polyfills/requestIdleCallback';
 import mockFSLibrary from './setupMockFullstoryLib';
 import setupMockImages from './setupMockImages';
 

src/GlobalModals.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Suspense, useEffect, useState} from 'react';
 import DelegateNoAccessModalProvider from './components/DelegateNoAccessModalProvider';
 import EmojiPicker from './components/EmojiPicker/EmojiPicker';
 import GrowlNotification from './components/GrowlNotification';
@@ -7,21 +7,47 @@ import ScreenShareRequestModal from './components/ScreenShareRequestModal';
 import UpdateAppModal from './components/UpdateAppModal';
 import * as EmojiPickerAction from './libs/actions/EmojiPickerAction';
 import {growlRef} from './libs/Growl';
-import PopoverReportActionContextMenu from './pages/inbox/report/ContextMenu/PopoverReportActionContextMenu';
 import * as ReportActionContextMenu from './pages/inbox/report/ContextMenu/ReportActionContextMenu';
 
+const LazyPopoverReportActionContextMenu = React.lazy(() => import('./pages/inbox/report/ContextMenu/PopoverReportActionContextMenu'));
+
+// Maximum time (ms) the context menu mount can stay deferred before requestIdleCallback forces it to run,
+// guaranteeing mount even if the main thread never becomes idle.
+const IDLE_CALLBACK_TIMEOUT_MS = 2000;
+
 /**
  * Renders global modals and overlays that are mounted once at the top level.
  */
 function GlobalModals() {
+    const [shouldRenderContextMenu, setShouldRenderContextMenu] = useState(false);
+
+    useEffect(() => {
+        // Defer loading the context menu until after startup to avoid pulling in heavy
+        // dependencies (ContextMenuActions, ReportUtils, ModifiedExpenseMessage, etc.)
+        // during the ManualAppStartup span.
+        const id = requestIdleCallback(() => setShouldRenderContextMenu(true), {timeout: IDLE_CALLBACK_TIMEOUT_MS});
+
+        // Allow showContextMenu() to force eager mount if the user interacts before the idle callback fires.
+        ReportActionContextMenu.registerEnsureContextMenuMounted(() => setShouldRenderContextMenu(true));
+
+        return () => {
+            cancelIdleCallback(id);
+            ReportActionContextMenu.registerEnsureContextMenuMounted(null);
+        };
+    }, []);
+
     return (
         <>
             <UpdateAppModal />
             {/* Those below are only available to the authenticated user. */}
             <GrowlNotification ref={growlRef} />
             <DelegateNoAccessModalProvider>
-                {/* eslint-disable-next-line react-hooks/refs -- module-level createRef, safe to pass as ref prop */}
-                <PopoverReportActionContextMenu ref={ReportActionContextMenu.contextMenuRef} />
+                {shouldRenderContextMenu && (
+                    <Suspense fallback={null}>
+                        {/* eslint-disable-next-line react-hooks/refs -- module-level createRef, safe to pass as ref prop */}
+                        <LazyPopoverReportActionContextMenu ref={ReportActionContextMenu.contextMenuRef} />
+                    </Suspense>
+                )}
             </DelegateNoAccessModalProvider>
             {/* eslint-disable-next-line react-hooks/refs -- module-level createRef, safe to pass as ref prop */}
             <EmojiPicker ref={EmojiPickerAction.emojiPickerRef} />

src/pages/inbox/report/ContextMenu/ReportActionContextMenu.ts

@@ -71,6 +71,20 @@ type ReportActionContextMenu = {
 
 const contextMenuRef = React.createRef<ReportActionContextMenu>();
 
+// Retry budget for waiting on the lazy-mounted popover ref.
+// 10 attempts × ~16ms ≈ 160ms total, enough to cover React.lazy chunk load + commit
+// on a cold start without blocking user interaction for long.
+const MAX_CONTEXT_MENU_MOUNT_RETRIES = 10;
+const CONTEXT_MENU_MOUNT_RETRY_INTERVAL_MS = 16;
+
+// Bridge used when PopoverReportActionContextMenu is lazy-mounted: lets showContextMenu
+// trigger eager mount if the user interacts before the idle-deferred mount runs.
+let ensureContextMenuMounted: (() => void) | null = null;
+
+function registerEnsureContextMenuMounted(handler: (() => void) | null) {
+    ensureContextMenuMounted = handler;
+}
+
 /**
  * Hide the ReportActionContextMenu modal popover.
  * Hides the popover menu with an optional delay
@@ -128,6 +142,20 @@ function hideContextMenu(shouldDelay?: boolean, onHideCallback = () => {}, param
  */
 function showContextMenu(showContextMenuParams: ShowContextMenuParams) {
     if (!contextMenuRef.current) {
+        // Popover is lazy-mounted; trigger eager mount and retry until the ref is populated
+        // so a fast cold-start interaction isn't silently dropped.
+        ensureContextMenuMounted?.();
+        let retries = MAX_CONTEXT_MENU_MOUNT_RETRIES;
+        const attempt = () => {
+            if (contextMenuRef.current) {
+                showContextMenu(showContextMenuParams);
+                return;
+            }
+            if (retries-- > 0) {
+                setTimeout(attempt, CONTEXT_MENU_MOUNT_RETRY_INTERVAL_MS);
+            }
+        };
+        attempt();
         return;
     }
     const show = () => {
@@ -182,5 +210,5 @@ function clearActiveReportAction() {
     return contextMenuRef.current.clearActiveReportAction();
 }
 
-export {contextMenuRef, showContextMenu, hideContextMenu, isActiveReportAction, clearActiveReportAction, showDeleteModal, hideDeleteModal};
+export {contextMenuRef, showContextMenu, hideContextMenu, isActiveReportAction, clearActiveReportAction, showDeleteModal, hideDeleteModal, registerEnsureContextMenuMounted};
 export type {ContextMenuType, ReportActionContextMenu, ContextMenuAnchor};

src/polyfills/requestIdleCallback.ts

@@ -0,0 +1,40 @@
+/**
+ * Polyfill for requestIdleCallback / cancelIdleCallback.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
+ *
+ * Falls back to setTimeout/clearTimeout where the API is unavailable (e.g. Safari < 16.4).
+ * The fallback runs the callback on the next tick rather than during true idle time —
+ * not perfect, but good enough to keep work off the synchronous render path on platforms
+ * that lack native idle scheduling.
+ */
+type GlobalWithIdleCallback = typeof globalThis & {
+    requestIdleCallback?: (callback: IdleRequestCallback, options?: IdleRequestOptions) => number;
+    cancelIdleCallback?: (handle: number) => void;
+};
+
+const g = globalThis as GlobalWithIdleCallback;
+
+if (typeof g.requestIdleCallback !== 'function') {
+    Object.defineProperty(g, 'requestIdleCallback', {
+        value(callback: IdleRequestCallback): number {
+            return setTimeout(() => {
+                callback({
+                    didTimeout: false,
+                    timeRemaining: () => 0,
+                });
+            }, 1) as unknown as number;
+        },
+        configurable: true,
+        writable: true,
+    });
+}
+
+if (typeof g.cancelIdleCallback !== 'function') {
+    Object.defineProperty(g, 'cancelIdleCallback', {
+        value(handle: number) {
+            clearTimeout(handle as unknown as ReturnType<typeof setTimeout>);
+        },
+        configurable: true,
+        writable: true,
+    });
+}