fix: ensure early CSS injection by preloading Verge config (#5690)

* fix(theme): background css injection

* fix: ensure early CSS injection by preloading Verge config

src-tauri/src/utils/resolve/window_script.rs

@@ -72,12 +72,10 @@ pub const WINDOW_INITIAL_SCRIPT: &str = r##"
             root.style.setProperty("--bg-color", bgColor);
             root.style.setProperty("--text-color", textColor);
             root.style.colorScheme = isDark ? "dark" : "light";
-            root.style.backgroundColor = bgColor;
             root.style.color = textColor;
         }
         const paintBody = () => {
             if (!document.body) return;
-            document.body.style.backgroundColor = bgColor;
             document.body.style.color = textColor;
         };
         if (document.readyState === "loading") {
@@ -93,81 +91,7 @@ pub const WINDOW_INITIAL_SCRIPT: &str = r##"
         return isDark;
     };
 
-    const isDarkTheme = applyInitialTheme(initialTheme);
+    applyInitialTheme(initialTheme);
-
-    const getInitialOverlayColors = () => ({
-        bg: isDarkTheme ? initialColors.darkBg : initialColors.lightBg,
-        text: isDarkTheme ? "#ffffff" : "#333",
-        spinnerTrack: isDarkTheme ? "#3a3a3a" : "#e3e3e3",
-        spinnerTop: isDarkTheme ? "#0a84ff" : "#3498db",
-    });
-
-    function createOrUpdateLoadingOverlay() {
-        const colors = getInitialOverlayColors();
-        const existed = document.getElementById('initial-loading-overlay');
-
-        const applyOverlayColors = (element) => {
-            element.style.setProperty("--bg-color", colors.bg);
-            element.style.setProperty("--text-color", colors.text);
-            element.style.setProperty("--spinner-track", colors.spinnerTrack);
-            element.style.setProperty("--spinner-top", colors.spinnerTop);
-        };
-
-        if (existed) {
-            console.log('[Tauri] 复用已有加载指示器');
-            applyOverlayColors(existed);
-            return;
-        }
-
-        console.log('[Tauri] 创建加载指示器');
-        const loadingDiv = document.createElement('div');
-        loadingDiv.id = 'initial-loading-overlay';
-        loadingDiv.innerHTML = `
-            <div style="
-                position: fixed; top: 0; left: 0; right: 0; bottom: 0;
-                background: var(--bg-color, ${colors.bg}); color: var(--text-color, ${colors.text});
-                display: flex; flex-direction: column; align-items: center;
-                justify-content: center; z-index: 9999;
-                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-                transition: opacity 0.3s ease;
-            ">
-                <div style="margin-bottom: 20px;">
-                    <div style="
-                        width: 40px; height: 40px; border: 3px solid var(--spinner-track, ${colors.spinnerTrack});
-                        border-top: 3px solid var(--spinner-top, ${colors.spinnerTop}); border-radius: 50%;
-                        animation: spin 1s linear infinite;
-                    "></div>
-                </div>
-                <div style="font-size: 14px; opacity: 0.7;">Loading Clash Verge...</div>
-            </div>
-            <style>
-                @keyframes spin {
-                    0% { transform: rotate(0deg); }
-                    100% { transform: rotate(360deg); }
-                }
-            </style>
-        `;
-
-        applyOverlayColors(loadingDiv);
-
-        if (document.body) {
-            document.body.appendChild(loadingDiv);
-        } else {
-            document.addEventListener('DOMContentLoaded', () => {
-                if (document.body && !document.getElementById('initial-loading-overlay')) {
-                    document.body.appendChild(loadingDiv);
-                }
-            });
-        }
-    }
-
-    createOrUpdateLoadingOverlay();
-
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', createOrUpdateLoadingOverlay);
-    } else {
-        createOrUpdateLoadingOverlay();
-    }
 
     console.log('[Tauri] 窗口初始化脚本执行完成');
 "##;

src/hooks/use-verge.ts

@@ -1,14 +1,24 @@
 import useSWR from "swr";
 
 import { getVergeConfig, patchVergeConfig } from "@/services/cmds";
+import {
+  getInitialVergeConfig,
+  setInitialVergeConfig,
+} from "@/services/preloaded-verge-config";
 
 export const useVerge = () => {
+  const initialVergeConfig = getInitialVergeConfig();
   const { data: verge, mutate: mutateVerge } = useSWR(
     "getVergeConfig",
     async () => {
       const config = await getVergeConfig();
+      setInitialVergeConfig(config);
       return config;
     },
+    {
+      fallbackData: initialVergeConfig ?? undefined,
+      revalidateOnMount: !initialVergeConfig,
+    },
   );
 
   const patchVerge = async (value: Partial<IVergeConfig>) => {

src/index.html

@@ -41,7 +41,6 @@
         width: 100%;
         height: 100%;
         margin: 0;
-        background: var(--bg-color);
         color: var(--text-color);
       }
 

src/main.tsx

@@ -22,6 +22,7 @@ import {
   initializeLanguage,
   resolveLanguage,
 } from "./services/i18n";
+import { setInitialVergeConfig } from "./services/preloaded-verge-config";
 import {
   LoadingCacheProvider,
   ThemeModeProvider,
@@ -168,9 +169,11 @@ const fetchVergeConfig = async () => {
   try {
     const config = await getVergeConfig();
     cachedVergeConfig = config;
+    setInitialVergeConfig(config);
     return config;
   } catch (error) {
     console.warn("[main.tsx] Failed to read Verge config:", error);
+    setInitialVergeConfig(null);
     return null;
   }
 };

src/services/preloaded-verge-config.ts

@@ -0,0 +1,7 @@
+let initialVergeConfig: IVergeConfig | null | undefined;
+
+export const setInitialVergeConfig = (config: IVergeConfig | null) => {
+  initialVergeConfig = config;
+};
+
+export const getInitialVergeConfig = () => initialVergeConfig;