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/editor-left-menu/components/settings/settings-editor-theme.tsx

@@ -14,8 +14,8 @@ export default function SettingsEditorTheme() {
   const options = useMemo(() => {
     const editorThemeOptions: Array<Option> =
       editorThemes?.map(theme => ({
-        value: theme,
-        label: theme.replace(/_/g, ' '),
+        value: theme.name,
+        label: theme.name.replace(/_/g, ' '),
       })) ?? []
 
     const dividerOption: Option = {
@@ -26,8 +26,8 @@ export default function SettingsEditorTheme() {
 
     const legacyEditorThemeOptions: Array<Option> =
       legacyEditorThemes?.map(theme => ({
-        value: theme,
-        label: theme.replace(/_/g, ' ') + ' (Legacy)',
+        value: theme.name,
+        label: theme.name.replace(/_/g, ' ') + ' (Legacy)',
       })) ?? []
 
     return [...editorThemeOptions, dividerOption, ...legacyEditorThemeOptions]

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

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

@@ -1,4 +1,4 @@
-import { LoadingPane } from '@/features/ide-react/components/editor/loading-pane'
+import { EditorLoadingPane } from '@/features/ide-react/components/editor/editor-loading-pane'
 import { useEditorOpenDocContext } from '@/features/ide-react/context/editor-open-doc-context'
 import { useFileTreeOpenContext } from '@/features/ide-react/context/file-tree-open-context'
 import classNames from 'classnames'
@@ -40,7 +40,7 @@ export const Editor = () => {
           className="ide-redesign-editor-panel"
         >
           <SourceEditor />
-          {isLoading && <LoadingPane />}
+          {isLoading && <EditorLoadingPane />}
         </Panel>
         {showSymbolPalette && (
           <>

services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/editor-theme-setting.tsx

@@ -14,8 +14,8 @@ export default function EditorThemeSetting() {
   const options = useMemo(() => {
     const editorThemeOptions: Array<Option> =
       editorThemes?.map(theme => ({
-        value: theme,
-        label: theme.replace(/_/g, ' '),
+        value: theme.name,
+        label: theme.name.replace(/_/g, ' '),
       })) ?? []
 
     const dividerOption: Option = {
@@ -26,8 +26,8 @@ export default function EditorThemeSetting() {
 
     const legacyEditorThemeOptions: Array<Option> =
       legacyEditorThemes?.map(theme => ({
-        value: theme,
-        label: theme.replace(/_/g, ' ') + ' (Legacy)',
+        value: theme.name,
+        label: theme.name.replace(/_/g, ' ') + ' (Legacy)',
       })) ?? []
 
     return [...editorThemeOptions, dividerOption, ...legacyEditorThemeOptions]

services/web/frontend/js/features/source-editor/extensions/theme.ts

@@ -287,7 +287,8 @@ const loadSelectedTheme = async (editorTheme: string) => {
     const themes = getMeta('ol-editorThemes') || []
     const legacyThemes = getMeta('ol-legacyEditorThemes') || []
     const themeExists =
-      themes.includes(editorTheme) || legacyThemes.includes(editorTheme)
+      themes.some(theme => theme.name === editorTheme) ||
+      legacyThemes.some(theme => theme.name === editorTheme)
     if (!themeExists) {
       editorTheme = 'textmate' // fallback to default if the theme is not found
     }

services/web/frontend/js/utils/meta.ts

@@ -117,7 +117,7 @@ export interface Meta {
   'ol-domainCaptureEnabled': boolean | undefined
   'ol-domainCaptureTestURL': string | undefined
   'ol-dropbox': { error: boolean; registered: boolean }
-  'ol-editorThemes': string[]
+  'ol-editorThemes': { name: string; dark: boolean }[]
   'ol-email': string
   'ol-emailAddressLimit': number
   'ol-error': { name: string } | undefined
@@ -188,7 +188,7 @@ export interface Meta {
   'ol-labsExperiments': ActiveExperiment[] | undefined
   'ol-languages': SpellCheckLanguage[]
   'ol-learnedWords': string[]
-  'ol-legacyEditorThemes': string[]
+  'ol-legacyEditorThemes': { name: string; dark: boolean }[]
   'ol-licenseQuantity'?: number
   'ol-loadingText': string
   'ol-managedGroupSubscriptions': ManagedGroupSubscription[]

services/web/frontend/stylesheets/pages/editor/file-view.scss

@@ -7,6 +7,11 @@
   .file-view .no-preview {
     color: var(--content-secondary-themed);
   }
+
+  .file-view .loading-panel {
+    color: var(--content-secondary-themed);
+    background: var(--bg-primary-themed);
+  }
 }
 
 .file-view {

services/web/frontend/stylesheets/pages/editor/ide.scss

@@ -77,6 +77,17 @@ $editor-toggler-bg-dark-color: color.adjust(
       background-color: var(--bg-tertiary-themed);
     }
   }
+
+  .loading-panel {
+    background-color: var(--bg-light-primary);
+    color: var(--content-primary);
+
+    // Based on editor theme rather than overall theme
+    &.loading-panel-dark {
+      background-color: var(--bg-dark-primary);
+      color: var(--content-primary-dark);
+    }
+  }
 }
 
 .global-alerts {