refactor: scope lazy modal chunk failures with LazyModalSlot wrapper

Author: rinej

src/GlobalModals.tsx

@@ -1,11 +1,10 @@
-import React, {startTransition, Suspense, useEffect, useState} from 'react';
-import {ErrorBoundary as ReactErrorBoundary} from 'react-error-boundary';
+import React, {startTransition, useEffect, useState} from 'react';
 import DelegateNoAccessModalProvider from './components/DelegateNoAccessModalProvider';
 import EmojiPicker from './components/EmojiPicker/EmojiPicker';
 import GrowlNotification from './components/GrowlNotification';
+import LazyModalSlot from './components/LazyModalSlot';
 import * as EmojiPickerAction from './libs/actions/EmojiPickerAction';
 import {growlRef} from './libs/Growl';
-import Log from './libs/Log';
 import * as ReportActionContextMenu from './pages/inbox/report/ContextMenu/ReportActionContextMenu';
 
 const LazyPopoverReportActionContextMenu = React.lazy(() => import('./pages/inbox/report/ContextMenu/PopoverReportActionContextMenu'));
@@ -17,24 +16,6 @@ const LazyProactiveAppReviewModalManager = React.lazy(() => import('./components
 // guaranteeing mount even if the main thread never becomes idle.
 const IDLE_CALLBACK_TIMEOUT_MS = 2000;
 
-const logModalChunkFailure = (error: Error, info: {componentStack?: string | null}) =>
-    Log.alert(`[GlobalModals] lazy chunk failure - ${error.message}`, {componentStack: info.componentStack ?? undefined}, false);
-
-/**
- * Wraps a lazy modal in its own ErrorBoundary + Suspense pair so a chunk-load failure
- * (or unrelated load latency) in one modal cannot tear down sibling modals or the rest of GlobalModals.
- */
-function LazyModalSlot({children}: {children: React.ReactNode}) {
-    return (
-        <ReactErrorBoundary
-            fallback={null}
-            onError={logModalChunkFailure}
-        >
-            <Suspense fallback={null}>{children}</Suspense>
-        </ReactErrorBoundary>
-    );
-}
-
 /**
  * Renders global modals and overlays that are mounted once at the top level.
  */

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;