Prevent theme flashing on initial window load (#115)

src-tauri/capabilities/capabilities.json

@@ -37,6 +37,7 @@
     "core:window:allow-minimize",
     "core:window:allow-set-decorations",
     "core:window:allow-set-title",
+    "core:window:allow-show",
     "core:window:allow-start-dragging",
     "core:window:allow-theme",
     "core:window:allow-toggle-maximize",

src-tauri/gen/schemas/capabilities.json

@@ -1 +1 @@
-{"main":{"identifier":"main","description":"Main permissions","local":true,"windows":["*"],"permissions":["core:event:allow-emit","core:event:allow-listen","core:event:allow-unlisten","os:allow-os-type","clipboard-manager:allow-clear","clipboard-manager:allow-write-text","clipboard-manager:allow-read-text","dialog:allow-open","dialog:allow-save","fs:allow-read-file","fs:allow-read-text-file",{"identifier":"fs:scope","allow":[{"path":"$APPDATA"},{"path":"$APPDATA/**"}]},"shell:allow-open","core:webview:allow-set-webview-zoom","core:window:allow-close","core:window:allow-is-fullscreen","core:window:allow-maximize","core:window:allow-minimize","core:window:allow-set-decorations","core:window:allow-set-title","core:window:allow-start-dragging","core:window:allow-theme","core:window:allow-toggle-maximize","core:window:allow-unmaximize","clipboard-manager:allow-read-text","clipboard-manager:allow-write-text"]}}
+{"main":{"identifier":"main","description":"Main permissions","local":true,"windows":["*"],"permissions":["core:event:allow-emit","core:event:allow-listen","core:event:allow-unlisten","os:allow-os-type","clipboard-manager:allow-clear","clipboard-manager:allow-write-text","clipboard-manager:allow-read-text","dialog:allow-open","dialog:allow-save","fs:allow-read-file","fs:allow-read-text-file",{"identifier":"fs:scope","allow":[{"path":"$APPDATA"},{"path":"$APPDATA/**"}]},"shell:allow-open","core:webview:allow-set-webview-zoom","core:window:allow-close","core:window:allow-is-fullscreen","core:window:allow-maximize","core:window:allow-minimize","core:window:allow-set-decorations","core:window:allow-set-title","core:window:allow-show","core:window:allow-start-dragging","core:window:allow-theme","core:window:allow-toggle-maximize","core:window:allow-unmaximize","clipboard-manager:allow-read-text","clipboard-manager:allow-write-text"]}}

src-tauri/src/lib.rs

@@ -2014,6 +2014,7 @@ fn create_window(handle: &AppHandle, config: CreateWindowConfig) -> WebviewWindo
         tauri::WebviewWindowBuilder::new(handle, config.label, WebviewUrl::App(config.url.into()))
             .title(config.title)
             .resizable(true)
+            .visible(false) // To prevent theme flashing, the frontend code calls show() immediately after configuring the theme
             .fullscreen(false)
             .disable_drag_drop_handler() // Required for frontend Dnd on windows
             .inner_size(config.inner_size.0, config.inner_size.1)

src-web/theme.ts

@@ -1,12 +1,9 @@
 import { emit, listen } from '@tauri-apps/api/event';
+import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
 import type { ModelPayload } from './components/GlobalHooks';
 import { getSettings } from './lib/store';
-import type {
-  Appearance} from './lib/theme/appearance';
-import {
-  getCSSAppearance,
-  subscribeToPreferredAppearance,
-} from './lib/theme/appearance';
+import type { Appearance } from './lib/theme/appearance';
+import { getCSSAppearance, subscribeToPreferredAppearance } from './lib/theme/appearance';
 import { getResolvedTheme } from './lib/theme/themes';
 import type { YaakTheme } from './lib/theme/window';
 import { addThemeStylesToDocument, setThemeOnDocument } from './lib/theme/window';
@@ -18,7 +15,15 @@ subscribeToPreferredAppearance(async (a) => {
   preferredAppearance = a;
   await configureTheme();
 });
-configureTheme().catch(console.error);
+
+configureTheme().then(
+  async () => {
+    // To prevent theme flashing, the backend hides new windows by default, so we
+    // need to show it here, after configuring the theme for the first time.
+    await getCurrentWebviewWindow().show();
+  },
+  (err) => console.log('Failed to configure theme', err),
+);
 
 // Listen for settings changes, the re-compute theme
 listen<ModelPayload>('upserted_model', async (event) => {