Encapsulate left menu loading error (#23724)

GitOrigin-RevId: 6f53b4932f6e691b7aaaa5d308571561af636877

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 />}