Lazy-load the React History view (#17290)

GitOrigin-RevId: 6d6ee5e993658e0895d9c2bcd4c2f60bba86c04e

services/web/frontend/js/features/ide-react/components/history-container.tsx

@@ -0,0 +1,25 @@
+import { useLayoutContext } from '../../../shared/context/layout-context'
+import { FullSizeLoadingSpinner } from '../../../shared/components/loading-spinner'
+import { ErrorBoundaryFallback } from '../../../shared/components/error-boundary-fallback'
+import withErrorBoundary from '../../../infrastructure/error-boundary'
+import { lazy, Suspense } from 'react'
+
+const HistoryRoot = lazy(
+  () => import('@/features/ide-react/components/history-root')
+)
+
+function HistoryContainer() {
+  const { view } = useLayoutContext()
+
+  if (view !== 'history') {
+    return null
+  }
+
+  return (
+    <Suspense fallback={<FullSizeLoadingSpinner delay={500} />}>
+      <HistoryRoot />
+    </Suspense>
+  )
+}
+
+export default withErrorBoundary(HistoryContainer, ErrorBoundaryFallback)

services/web/frontend/js/features/ide-react/components/history-root.tsx

@@ -0,0 +1,11 @@
+import { memo } from 'react'
+import { HistoryProvider } from '@/features/history/context/history-context'
+import History from './history'
+
+const HistoryRoot = () => (
+  <HistoryProvider>
+    <History />
+  </HistoryProvider>
+)
+
+export default memo(HistoryRoot)

services/web/frontend/js/features/ide-react/components/history-sidebar.tsx

@@ -1,5 +1,10 @@
 import React from 'react'
 
 export function HistorySidebar() {
-  return <aside className="ide-react-editor-sidebar history-file-tree" />
+  return (
+    <aside
+      id="history-file-tree"
+      className="ide-react-editor-sidebar history-file-tree"
+    />
+  )
 }

services/web/frontend/js/features/ide-react/components/history.tsx

@@ -7,7 +7,7 @@ import { useHistoryContext } from '@/features/history/context/history-context'
 
 export default function History() {
   const { updatesInfo } = useHistoryContext()
-  const fileTreeContainer = document.querySelector('.history-file-tree')
+  const fileTreeContainer = document.getElementById('history-file-tree')
 
   return (
     <>

services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx

@@ -7,13 +7,12 @@ import EditorNavigationToolbar from '@/features/ide-react/components/editor-navi
 import ChatPane from '@/features/chat/components/chat-pane'
 import { HorizontalToggler } from '@/features/ide-react/components/resize/horizontal-toggler'
 import { HistorySidebar } from '@/features/ide-react/components/history-sidebar'
-import { HistoryProvider } from '@/features/history/context/history-context'
-import History from '@/features/ide-react/components/history'
 import EditorSidebar from '@/features/ide-react/components/editor-sidebar'
 import { useTranslation } from 'react-i18next'
 import { useSidebarPane } from '@/features/ide-react/hooks/use-sidebar-pane'
 import { useChatPane } from '@/features/ide-react/hooks/use-chat-pane'
 import { EditorAndPdf } from '@/features/ide-react/components/editor-and-pdf'
+import HistoryContainer from '@/features/ide-react/components/history-container'
 
 export const MainLayout: FC = () => {
   const { view } = useLayoutContext()
@@ -86,11 +85,7 @@ export const MainLayout: FC = () => {
           <Panel id="panel-outer-main" order={2}>
             <PanelGroup autoSaveId="ide-inner-layout" direction="horizontal">
               <Panel className="ide-react-panel" id="panel-main" order={1}>
-                {view === 'history' && (
-                  <HistoryProvider>
-                    <History />
-                  </HistoryProvider>
-                )}
+                <HistoryContainer />
                 <EditorAndPdf />
               </Panel>