feat: optimize theme changing

Author: KatoakDR

electron/renderer/context/theme.tsx

@@ -4,11 +4,7 @@
 import type { EuiThemeColorMode } from '@elastic/eui';
 import type { ReactNode } from 'react';
 import { createContext, useEffect, useState } from 'react';
-import {
-  enableTheme,
-  getDefaultThemeName,
-  getThemeName,
-} from '../lib/theme.js';
+import { enableTheme, getThemeName } from '../lib/theme.js';
 
 /**
  * React context for storing theme-related data and callbacks.
@@ -35,9 +31,9 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = (
 ) => {
   const { children } = props;
 
-  const [colorMode, setColorMode] = useState(getDefaultThemeName());
+  const [colorMode, setColorMode] = useState(getThemeName());
 
-  // On initial mount in the browser, use any theme from local storage.
+  // On initial mount in the browser, load user's theme preference.
   useEffect(() => {
     setColorMode(getThemeName());
   }, []);

electron/renderer/lib/theme.ts

@@ -6,47 +6,98 @@ import type { Maybe } from '../../common/types.js';
 import { LocalStorage } from './local-storage.js';
 
 /**
- * The functions here are for tracking and setting the current theme.
- * localStorage is used to store the currently preferred them, though
- * that doesn't work on the server, where we just use a default.
+ * Find all the theme links on the page that we could switch between.
+ * See `_document.tsx` for how these are added to the page.
  */
+const getAllThemeLinks = (): Array<HTMLLinkElement> => {
+  return [
+    ...document.querySelectorAll<HTMLLinkElement>(
+      'link[data-name="eui-theme"]'
+    ),
+  ];
+};
 
-const getAllThemes = (): Array<HTMLLinkElement> => {
-  // @ts-ignore
-  return [...document.querySelectorAll('link[data-name="eui-theme"]')];
+/**
+ * Find the theme link on the page that matches the given theme name.
+ */
+const getThemeLink = (themeName: EuiThemeColorMode): Maybe<HTMLLinkElement> => {
+  return getAllThemeLinks().find((themeLink) => {
+    return themeLink.dataset.theme === themeName;
+  });
 };
 
+/**
+ * Sets the user's theme preference and actively updates the UI to match.
+ * To only set the preference without updating the UI, use `setThemeName`.
+ */
 export const enableTheme = (newThemeName: EuiThemeColorMode): void => {
   const oldThemeName = getThemeName();
-  LocalStorage.set<EuiThemeColorMode>('theme', newThemeName);
+  setThemeName(newThemeName);
 
-  for (const themeLink of getAllThemes()) {
-    // Disable all theme links, except for the desired theme, which we enable
-    themeLink.disabled = themeLink.dataset.theme !== newThemeName;
-    themeLink.ariaDisabled = String(themeLink.dataset.theme !== newThemeName);
-  }
+  const newThemeLink = getThemeLink(newThemeName);
 
-  // Add a class to the `body` element that indicates which theme we're using.
-  // This allows any custom styling to adapt to the current theme.
-  if (document.body.classList.contains(`appTheme-${oldThemeName}`)) {
-    document.body.classList.replace(
-      `appTheme-${oldThemeName}`,
-      `appTheme-${newThemeName}`
-    );
-  } else {
-    document.body.classList.add(`appTheme-${newThemeName}`);
+  if (!newThemeLink) {
+    return;
   }
+
+  // When toggling the theme, to prevent a flash of unstyled content
+  // then preload the new theme's CSS before enabling it.
+  const preloadThemeLink = document.createElement('link');
+  preloadThemeLink.rel = 'preload';
+  preloadThemeLink.as = 'style';
+  preloadThemeLink.href = newThemeLink.href;
+  document.head.appendChild(preloadThemeLink);
+
+  // Once the new theme is loaded then we can disable the old theme.
+  // Because the new theme is preloaded, the change should be instant.
+  preloadThemeLink.onload = () => {
+    for (const themeLink of getAllThemeLinks()) {
+      // Disable all theme links, except for the desired theme, which we enable
+      themeLink.disabled = themeLink.dataset.theme !== newThemeName;
+      themeLink.ariaDisabled = String(themeLink.dataset.theme !== newThemeName);
+    }
+
+    // Add a class to the `body` element that indicates which theme we're using.
+    // This allows any custom styling to adapt to the current theme.
+    if (document.body.classList.contains(`appTheme-${oldThemeName}`)) {
+      document.body.classList.replace(
+        `appTheme-${oldThemeName}`,
+        `appTheme-${newThemeName}`
+      );
+    } else {
+      document.body.classList.add(`appTheme-${newThemeName}`);
+    }
+
+    // Remove the preload link element.
+    document.head.removeChild(preloadThemeLink);
+  };
 };
 
+/**
+ * Gets the user's theme preference.
+ */
 export const getThemeName = (): EuiThemeColorMode => {
   return getStoredThemeName() || getDefaultThemeName();
 };
 
-export const getStoredThemeName = (): Maybe<EuiThemeColorMode> => {
+/**
+ * Sets the user's theme preference.
+ * Does not actively change the UI look and feel.
+ * To do that, use `enableTheme` or reload the app.
+ */
+export const setThemeName = (themeName: EuiThemeColorMode): void => {
+  setStoredThemeName(themeName);
+};
+
+const getStoredThemeName = (): Maybe<EuiThemeColorMode> => {
   return LocalStorage.get<EuiThemeColorMode>('theme');
 };
 
-export const getDefaultThemeName = (): EuiThemeColorMode => {
+const setStoredThemeName = (themeName: EuiThemeColorMode): void => {
+  LocalStorage.set<EuiThemeColorMode>('theme', themeName);
+};
+
+const getDefaultThemeName = (): EuiThemeColorMode => {
   return 'dark';
 };
 

electron/renderer/pages/_document.tsx

@@ -6,12 +6,12 @@ import { useMemo } from 'react';
 import type { LinkHTMLAttributes, ReactElement } from 'react';
 import type React from 'react';
 import type { Theme } from '../lib/theme.js';
-import { getDefaultThemeName, themeConfig } from '../lib/theme.js';
+import { getThemeName, themeConfig } from '../lib/theme.js';
 
 function createThemeLink(theme: Theme): ReactElement {
   let disabledProps = {};
 
-  if (theme.id !== getDefaultThemeName()) {
+  if (theme.id !== getThemeName()) {
     disabledProps = {
       'disabled': true,
       'aria-disabled': true,