Merge pull request #22720 from overleaf/dp-editor-redesign

Editor redesign skeleton page

GitOrigin-RevId: 966c88ac3714e4cc7de3e21951e4e1641bfd6852

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

@@ -1,3 +1,4 @@
+import { lazy, Suspense } from 'react'
 import { Alerts } from '@/features/ide-react/components/alerts/alerts'
 import { MainLayout } from '@/features/ide-react/components/layout/main-layout'
 import EditorLeftMenu from '@/features/editor-left-menu/components/editor-left-menu'
@@ -10,6 +11,11 @@ import { useHasLintingError } from '@/features/ide-react/hooks/use-has-linting-e
 import { Modals } from '@/features/ide-react/components/modals/modals'
 import { GlobalAlertsProvider } from '@/features/ide-react/context/global-alerts-context'
 import { GlobalToasts } from '../global-toasts'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
+
+const MainLayoutNew = lazy(
+  () => import('@/features/ide-redesign/components/main-layout')
+)
 
 export default function IdePage() {
   useLayoutEventTracking() // sent event when the layout changes
@@ -19,12 +25,22 @@ export default function IdePage() {
   useHasLintingError() // pass editor:lint hasLintingError to the compiler
   useOpenFile() // create ide.binaryFilesManager (TODO: move to the history file restore component)
 
+  const newEditor = useFeatureFlag('editor-redesign')
+
   return (
     <GlobalAlertsProvider>
       <Alerts />
       <Modals />
-      <EditorLeftMenu />
-      <MainLayout />
+      {newEditor ? (
+        <Suspense fallback={null}>
+          <MainLayoutNew />
+        </Suspense>
+      ) : (
+        <>
+          <EditorLeftMenu />
+          <MainLayout />
+        </>
+      )}
       <GlobalToasts />
     </GlobalAlertsProvider>
   )