Merge pull request Expensify#89180 from callstack-internal/eliran-lazy-load-global-modals

perf: lazy-load rare-trigger global modals to shrink ManualAppStartup

Author: roryabraham

src/GlobalModals.tsx

@@ -1,15 +1,16 @@
-import React, {Suspense, useEffect, useState} from 'react';
+import React, {startTransition, useEffect, useState} from 'react';
 import DelegateNoAccessModalProvider from './components/DelegateNoAccessModalProvider';
 import EmojiPicker from './components/EmojiPicker/EmojiPicker';
 import GrowlNotification from './components/GrowlNotification';
-import ProactiveAppReviewModalManager from './components/ProactiveAppReviewModalManager';
-import ScreenShareRequestModal from './components/ScreenShareRequestModal';
-import UpdateAppModal from './components/UpdateAppModal';
+import LazyModalSlot from './components/LazyModalSlot';
 import * as EmojiPickerAction from './libs/actions/EmojiPickerAction';
 import {growlRef} from './libs/Growl';
 import * as ReportActionContextMenu from './pages/inbox/report/ContextMenu/ReportActionContextMenu';
 
 const LazyPopoverReportActionContextMenu = React.lazy(() => import('./pages/inbox/report/ContextMenu/PopoverReportActionContextMenu'));
+const LazyUpdateAppModal = React.lazy(() => import('./components/UpdateAppModal'));
+const LazyScreenShareRequestModal = React.lazy(() => import('./components/ScreenShareRequestModal'));
+const LazyProactiveAppReviewModalManager = React.lazy(() => import('./components/ProactiveAppReviewModalManager'));
 
 // 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.
@@ -20,40 +21,60 @@ const IDLE_CALLBACK_TIMEOUT_MS = 2000;
  */
 function GlobalModals() {
     const [shouldRenderContextMenu, setShouldRenderContextMenu] = useState(false);
+    const [shouldRenderDeferredModals, setShouldRenderDeferredModals] = useState(false);
 
+    // Defer loading the context menu and rare-condition modals until after startup to avoid
+    // pulling in their dependencies (ContextMenuActions, ReportUtils, ModifiedExpenseMessage,
+    // ProactiveAppReviewModal, etc.) and their useOnyx subscriptions during the ManualAppStartup span.
     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});
+        const id = requestIdleCallback(
+            () => {
+                startTransition(() => {
+                    setShouldRenderContextMenu(true);
+                    setShouldRenderDeferredModals(true);
+                });
+            },
+            {timeout: IDLE_CALLBACK_TIMEOUT_MS},
+        );
+        return () => cancelIdleCallback(id);
+    }, []);
 
-        // Allow showContextMenu() to force eager mount if the user interacts before the idle callback fires.
+    // Allow showContextMenu() to force eager mount if the user interacts before the idle callback fires.
+    useEffect(() => {
         ReportActionContextMenu.registerEnsureContextMenuMounted(() => setShouldRenderContextMenu(true));
-
-        return () => {
-            cancelIdleCallback(id);
-            ReportActionContextMenu.registerEnsureContextMenuMounted(null);
-        };
+        return () => ReportActionContextMenu.registerEnsureContextMenuMounted(null);
     }, []);
 
     return (
         <>
-            <UpdateAppModal />
-            {/* Those below are only available to the authenticated user. */}
             <GrowlNotification ref={growlRef} />
             <DelegateNoAccessModalProvider>
                 {shouldRenderContextMenu && (
-                    <Suspense fallback={null}>
+                    <LazyModalSlot>
                         {/* eslint-disable-next-line react-hooks/refs -- module-level createRef, safe to pass as ref prop */}
                         <LazyPopoverReportActionContextMenu ref={ReportActionContextMenu.contextMenuRef} />
-                    </Suspense>
+                    </LazyModalSlot>
                 )}
             </DelegateNoAccessModalProvider>
             {/* eslint-disable-next-line react-hooks/refs -- module-level createRef, safe to pass as ref prop */}
             <EmojiPicker ref={EmojiPickerAction.emojiPickerRef} />
-            {/* Proactive app review modal shown when user has completed a trigger action */}
-            <ProactiveAppReviewModalManager />
-            <ScreenShareRequestModal />
+            {shouldRenderDeferredModals && (
+                <>
+                    {/* Order matters: BaseModal hardcodes zIndex: 1 on every modal, so DOM source order
+                        determines stacking when modals coincide. UpdateAppModal is last so the forced-update
+                        prompt sits on top if it ever overlaps with the others. */}
+                    <LazyModalSlot>
+                        {/* Proactive app review modal shown when user has completed a trigger action */}
+                        <LazyProactiveAppReviewModalManager />
+                    </LazyModalSlot>
+                    <LazyModalSlot>
+                        <LazyScreenShareRequestModal />
+                    </LazyModalSlot>
+                    <LazyModalSlot>
+                        <LazyUpdateAppModal />
+                    </LazyModalSlot>
+                </>
+            )}
         </>
     );
 }

src/components/LazyModalSlot.tsx

@@ -0,0 +1,23 @@
+import React, {Suspense} from 'react';
+import {ErrorBoundary as ReactErrorBoundary} from 'react-error-boundary';
+import Log from '@libs/Log';
+
+const logModalChunkFailure = (error: Error, info: {componentStack?: string | null}) =>
+    Log.alert(`[GlobalModals] lazy chunk failure - ${error.message}`, {componentStack: info.componentStack ?? undefined}, false);
+
+/**
+ * Wraps a lazy-loaded child in its own ErrorBoundary + Suspense pair so a chunk-load failure
+ * (or unrelated load latency) in one slot cannot tear down sibling slots or surrounding components.
+ */
+function LazyModalSlot({children}: {children: React.ReactNode}) {
+    return (
+        <ReactErrorBoundary
+            fallback={null}
+            onError={logModalChunkFailure}
+        >
+            <Suspense fallback={null}>{children}</Suspense>
+        </ReactErrorBoundary>
+    );
+}
+
+export default LazyModalSlot;