From 56c71cf7f763496724adbdba2b3060f4396e4ae4 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Thu, 20 Feb 2025 08:43:35 +0000
Subject: [PATCH] Encapsulate left menu loading error (#23724)

GitOrigin-RevId: 6f53b4932f6e691b7aaaa5d308571561af636877
---
 .../components/editor-left-menu.tsx           | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx b/services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx
index 6564eaf27a..494a6e67df 100644
--- a/services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx
+++ b/services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx
@@ -8,9 +8,24 @@ import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner'
 import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
 import { Offcanvas } from 'react-bootstrap-5'
 import { EditorLeftMenuProvider } from './editor-left-menu-context'
+import withErrorBoundary from '@/infrastructure/error-boundary'
+import OLNotification from '@/features/ui/components/ol/ol-notification'
+import { useTranslation } from 'react-i18next'
 
 const EditorLeftMenuBody = lazy(() => import('./editor-left-menu-body'))
 
+const LazyEditorLeftMenuWithErrorBoundary = withErrorBoundary(
+  () => (
+    <Suspense fallback={<FullSizeLoadingSpinner delay={500} />}>
+      <EditorLeftMenuBody />
+    </Suspense>
+  ),
+  () => {
+    const { t } = useTranslation()
+    return <OLNotification type="error" content={t('something_went_wrong')} />
+  }
+)
+
 function EditorLeftMenu() {
   const { leftMenuShown, setLeftMenuShown } = useLayoutContext()
 
@@ -55,9 +70,7 @@ function EditorLeftMenu() {
               })}
               id="left-menu"
             >
-              <Suspense fallback={<FullSizeLoadingSpinner delay={500} />}>
-                <EditorLeftMenuBody />
-              </Suspense>
+              <LazyEditorLeftMenuWithErrorBoundary />
             </Offcanvas.Body>
           </Offcanvas>
           {leftMenuShown && <LeftMenuMask />}