Merge pull request #29899 from overleaf/mj-dark-mode-file-flash

[web] Avoid background color flash when switching files

GitOrigin-RevId: e5d2fbb631fd54d195b9cb51b2a9db584d205138

services/web/frontend/js/features/ide-react/components/editor/editor-loading-pane.tsx

@@ -0,0 +1,25 @@
+import { FC, useMemo } from 'react'
+import LoadingSpinner from '@/shared/components/loading-spinner'
+import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
+import getMeta from '@/utils/meta'
+import classNames from 'classnames'
+
+export const EditorLoadingPane: FC = () => {
+  const { editorTheme } = useProjectSettingsContext()
+  const isDark = useMemo(() => {
+    const themes = getMeta('ol-editorThemes') || []
+    const legacyThemes = getMeta('ol-legacyEditorThemes') || []
+    const selectedTheme =
+      themes.find(theme => theme.name === editorTheme) ||
+      legacyThemes.find(theme => theme.name === editorTheme)
+    return selectedTheme?.dark ?? false
+  }, [editorTheme])
+
+  return (
+    <div
+      className={classNames('loading-panel', { 'loading-panel-dark': isDark })}
+    >
+      <LoadingSpinner />
+    </div>
+  )
+}

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

@@ -4,7 +4,7 @@ import SourceEditor from '@/features/source-editor/components/source-editor'
 import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
 import { useEditorOpenDocContext } from '@/features/ide-react/context/editor-open-doc-context'
 import classNames from 'classnames'
-import { LoadingPane } from '@/features/ide-react/components/editor/loading-pane'
+import { EditorLoadingPane } from '@/features/ide-react/components/editor/editor-loading-pane'
 import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner'
 import { VerticalResizeHandle } from '@/features/ide-react/components/resize/vertical-resize-handle'
 import { useFileTreeOpenContext } from '@/features/ide-react/context/file-tree-open-context'
@@ -37,7 +37,7 @@ export const EditorPane: FC = () => {
           className="ide-react-editor-panel"
         >
           <SourceEditor />
-          {isLoading && <LoadingPane />}
+          {isLoading && <EditorLoadingPane />}
         </Panel>
 
         {showSymbolPalette && (

services/web/frontend/js/features/ide-react/components/editor/loading-pane.tsx

@@ -1,10 +0,0 @@
-import { FC } from 'react'
-import LoadingSpinner from '@/shared/components/loading-spinner'
-
-export const LoadingPane: FC = () => {
-  return (
-    <div className="loading-panel">
-      <LoadingSpinner />
-    </div>
-  )
-}