fix: app freeze when core run by service mode and open app window (#4922)

* fix: app freeze when core run by service mode

* chore: update

* chore: update UPDATELOG

---------

Co-authored-by: Tunglies <77394545+Tunglies@users.noreply.github.com>

UPDATELOG.md

@@ -28,6 +28,7 @@
 - 托盘节点切换不再显示隐藏组
 - 修复前端 IP 检测无法使用 ipapi, ipsb 提供商
 - 修复MacOS 下 Tun开启后 系统代理无法打开的问题
+- 修复服务模式启动时，修改、生成配置文件或重启内核可能导致页面卡死的问题
 
 ## v2.4.2
 

src/hooks/use-system-state.ts

@@ -8,39 +8,46 @@ import { getRunningMode, isAdmin, isServiceAvailable } from "@/services/cmds";
  */
 export function useSystemState() {
   // 获取运行模式
-  const { data: runningMode = "Sidecar", mutate: mutateRunningMode } = useSWR(
+  const {
-    "getRunningMode",
+    data: runningMode = "Sidecar",
-    getRunningMode,
+    mutate: mutateRunningMode,
-    {
+    isLoading: runningModeLoading,
-      suspense: false,
+  } = useSWR("getRunningMode", getRunningMode, {
-      revalidateOnFocus: false,
+    suspense: false,
-    },
+    revalidateOnFocus: false,
-  );
+  });
   const isSidecarMode = runningMode === "Sidecar";
   const isServiceMode = runningMode === "Service";
 
   // 获取管理员状态
-  const { data: isAdminMode = false } = useSWR("isAdmin", isAdmin, {
+  const { data: isAdminMode = false, isLoading: isAdminLoading } = useSWR(
-    suspense: false,
+    "isAdmin",
-    revalidateOnFocus: false,
+    isAdmin,
-  });
-
-  const { data: isServiceOk = false, mutate: mutateServiceOk } = useSWR(
-    "isServiceAvailable",
-    isServiceAvailable,
     {
       suspense: false,
       revalidateOnFocus: false,
-      onSuccess: (data) => {
-        console.log("[useSystemState] 服务状态更新:", data);
-      },
-      onError: (error) => {
-        console.error("[useSystemState] 服务状态检查失败:", error);
-      },
-      isPaused: () => !isServiceMode, // 仅在非 Service 模式下暂停请求
     },
   );
 
+  const {
+    data: isServiceOk = false,
+    mutate: mutateServiceOk,
+    isLoading: isServiceLoading,
+  } = useSWR(isServiceMode ? "isServiceAvailable" : null, isServiceAvailable, {
+    suspense: false,
+    revalidateOnFocus: false,
+    onSuccess: (data) => {
+      console.log("[useSystemState] 服务状态更新:", data);
+    },
+    onError: (error) => {
+      console.error("[useSystemState] 服务状态检查失败:", error);
+    },
+    // isPaused: () => !isServiceMode, // 仅在非 Service 模式下暂停请求
+  });
+
+  const isLoading =
+    runningModeLoading || isAdminLoading || (isServiceMode && isServiceLoading);
+
   const isTunModeAvailable = isAdminMode || isServiceOk;
 
   return {
@@ -52,5 +59,6 @@ export function useSystemState() {
     isTunModeAvailable: isTunModeAvailable,
     mutateRunningMode,
     mutateServiceOk,
+    isLoading,
   };
 }

src/hooks/use-verge.ts

@@ -8,7 +8,7 @@ import { showNotice } from "@/services/noticeService";
 
 export const useVerge = () => {
   const { t } = useTranslation();
-  const { isTunModeAvailable } = useSystemState();
+  const { isTunModeAvailable, isLoading } = useSystemState();
 
   const { data: verge, mutate: mutateVerge } = useSWR(
     "getVergeConfig",
@@ -27,7 +27,7 @@ export const useVerge = () => {
 
   // 当服务不可用且TUN模式开启时自动关闭TUN
   useEffect(() => {
-    if (enable_tun_mode && !isTunModeAvailable) {
+    if (enable_tun_mode && !isTunModeAvailable && !isLoading) {
       console.log("[useVerge] 检测到服务不可用，自动关闭TUN模式");
 
       patchVergeConfig({ enable_tun_mode: false })
@@ -43,7 +43,7 @@ export const useVerge = () => {
           showNotice("error", t("Failed to disable TUN Mode automatically"));
         });
     }
-  }, [isTunModeAvailable, enable_tun_mode, mutateVerge, t]);
+  }, [isTunModeAvailable, isLoading, enable_tun_mode, mutateVerge, t]);
 
   return {
     verge,