Merge pull request #15056 from overleaf/td-ide-connection-load

IDE page: connection manager and loading screen

GitOrigin-RevId: 2cbc8c09aeb36a14eae66da78b267c7a830fb71a

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

@@ -1,7 +1,9 @@
-import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
 import { GenericErrorBoundaryFallback } from '@/shared/components/generic-error-boundary-fallback'
 import withErrorBoundary from '@/infrastructure/error-boundary'
 import IdePage from '@/features/ide-react/components/layout/ide-page'
+import { ReactContextRoot } from '@/features/ide-react/context/react-context-root'
+import { Loading } from '@/features/ide-react/components/loading'
+import getMeta from '@/utils/meta'
 
 function IdeRoot() {
   // Check that we haven't inadvertently loaded Angular
@@ -10,13 +12,15 @@ function IdeRoot() {
     throw new Error('Angular detected. This page must not load Angular.')
   }
 
-  const { isReady } = useWaitForI18n()
+  const loadingText = getMeta('ol-loadingText')
 
-  if (!isReady) {
-    return null
-  }
-
-  return <IdePage />
+  return (
+    <ReactContextRoot>
+      <Loading loadingText={loadingText}>
+        <IdePage />
+      </Loading>
+    </ReactContextRoot>
+  )
 }
 
 export default withErrorBoundary(IdeRoot, GenericErrorBoundaryFallback)