From 456d1abacde2c841b4c578e8a52d372ca546c5fa Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Tue, 27 Feb 2024 10:30:37 +0000
Subject: [PATCH] Lazy-load the React History view (#17290)

GitOrigin-RevId: 6d6ee5e993658e0895d9c2bcd4c2f60bba86c04e
---
 .../components/history-container.tsx          | 25 +++++++++++++++++++
 .../ide-react/components/history-root.tsx     | 11 ++++++++
 .../ide-react/components/history-sidebar.tsx  |  7 +++++-
 .../features/ide-react/components/history.tsx |  2 +-
 .../components/layout/main-layout.tsx         |  9 ++-----
 5 files changed, 45 insertions(+), 9 deletions(-)
 create mode 100644 services/web/frontend/js/features/ide-react/components/history-container.tsx
 create mode 100644 services/web/frontend/js/features/ide-react/components/history-root.tsx

diff --git a/services/web/frontend/js/features/ide-react/components/history-container.tsx b/services/web/frontend/js/features/ide-react/components/history-container.tsx
new file mode 100644
index 0000000000..32c4b2c70b
--- /dev/null
+++ b/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)
diff --git a/services/web/frontend/js/features/ide-react/components/history-root.tsx b/services/web/frontend/js/features/ide-react/components/history-root.tsx
new file mode 100644
index 0000000000..6dad985eda
--- /dev/null
+++ b/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)
diff --git a/services/web/frontend/js/features/ide-react/components/history-sidebar.tsx b/services/web/frontend/js/features/ide-react/components/history-sidebar.tsx
index d929d3f9d1..e010951a46 100644
--- a/services/web/frontend/js/features/ide-react/components/history-sidebar.tsx
+++ b/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"
+    />
+  )
 }
diff --git a/services/web/frontend/js/features/ide-react/components/history.tsx b/services/web/frontend/js/features/ide-react/components/history.tsx
index 173b039b5f..160f5ca27a 100644
--- a/services/web/frontend/js/features/ide-react/components/history.tsx
+++ b/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 (
     <>
diff --git a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx b/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
index 7da8e4060d..204c087502 100644
--- a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
+++ b/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>