From 008234988ca0f232d880db4bf3664b37aa51584f Mon Sep 17 00:00:00 2001
From: Sline <realakayuki@gmail.com>
Date: Mon, 1 Dec 2025 21:45:01 +0800
Subject: [PATCH] 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 | 78 +-------------------
 src/hooks/use-verge.ts                       | 10 +++
 src/index.html                               |  1 -
 src/main.tsx                                 |  3 +
 src/services/preloaded-verge-config.ts       |  7 ++
 5 files changed, 21 insertions(+), 78 deletions(-)
 create mode 100644 src/services/preloaded-verge-config.ts

diff --git a/src-tauri/src/utils/resolve/window_script.rs b/src-tauri/src/utils/resolve/window_script.rs
index c331dedf6..ff7062cd1 100644
--- a/src-tauri/src/utils/resolve/window_script.rs
+++ b/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);
-
-    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();
-    }
+    applyInitialTheme(initialTheme);
 
     console.log('[Tauri] 窗口初始化脚本执行完成');
 "##;
diff --git a/src/hooks/use-verge.ts b/src/hooks/use-verge.ts
index f6415ff80..7385438ad 100644
--- a/src/hooks/use-verge.ts
+++ b/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>) => {
diff --git a/src/index.html b/src/index.html
index ebd340e25..a148cfdc8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -41,7 +41,6 @@
         width: 100%;
         height: 100%;
         margin: 0;
-        background: var(--bg-color);
         color: var(--text-color);
       }
 
diff --git a/src/main.tsx b/src/main.tsx
index 41a703b3c..5db9a594a 100644
--- a/src/main.tsx
+++ b/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;
   }
 };
diff --git a/src/services/preloaded-verge-config.ts b/src/services/preloaded-verge-config.ts
new file mode 100644
index 000000000..96e76070b
--- /dev/null
+++ b/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;