github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Lazy-load the React History view (#17290)

Browse source 
GitOrigin-RevId: 6d6ee5e993658e0895d9c2bcd4c2f60bba86c04e
This commit is contained in:
Alf Eaton 2024-02-27 10:30:37 +00:00 committed by Copybot
parent 7b93640b96
commit 0dfb4d8de6
5 changed files with 45 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
services/web/frontend/js/features/ide-react/components/history-container.tsx Normal file
View file

@ -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)

11
services/web/frontend/js/features/ide-react/components/history-root.tsx Normal file
View file

@ -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)

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

@ -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"
/>
)
}

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

@ -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 (
<>

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

@ -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>