fix: api loading delay

src/components/traffic.tsx

@@ -9,14 +9,18 @@ const Traffic = () => {
   const [traffic, setTraffic] = useState({ up: 0, down: 0 });
 
   useEffect(() => {
-    const { server, secret } = getInfomation();
+    let ws: WebSocket | null = null;
-    const ws = new WebSocket(`ws://${server}/traffic?token=${secret}`);
 
-    ws.addEventListener("message", (event) => {
+    getInfomation().then((result) => {
-      setTraffic(JSON.parse(event.data) as ApiType.TrafficItem);
+      const { server = "", secret = "" } = result;
+      ws = new WebSocket(`ws://${server}/traffic?token=${secret}`);
+
+      ws.addEventListener("message", (event) => {
+        setTraffic(JSON.parse(event.data) as ApiType.TrafficItem);
+      });
     });
 
-    return () => ws.close();
+    return () => ws?.close();
   }, []);
 
   const [up, upUnit] = parseTraffic(traffic.up);

src/pages/_layout.tsx

@@ -4,8 +4,7 @@ import { Route, Routes } from "react-router-dom";
 import { useRecoilState } from "recoil";
 import { createTheme, List, Paper, ThemeProvider } from "@mui/material";
 import { atomPaletteMode } from "../states/setting";
-import { getClashInfo, getVergeConfig } from "../services/cmds";
+import { getVergeConfig } from "../services/cmds";
-import { initAxios } from "../services/api";
 import LogoSvg from "../assets/image/logo.svg";
 import LogPage from "./log";
 import HomePage from "./home";
@@ -43,12 +42,6 @@ const Layout = () => {
   const [mode, setMode] = useRecoilState(atomPaletteMode);
   const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
 
-  useEffect(() => {
-    getClashInfo()
-      .then((result) => initAxios(result?.controller ?? {}))
-      .catch(() => console.error("can not initialize clash verge"));
-  }, []);
-
   useEffect(() => {
     setMode(vergeConfig?.theme_mode ?? "light");
   }, [vergeConfig?.theme_mode]);

src/pages/connections.tsx

@@ -10,15 +10,19 @@ const ConnectionsPage = () => {
   const [conn, setConn] = useState<ApiType.Connections>(initConn);
 
   useEffect(() => {
-    const { server, secret } = getInfomation();
+    let ws: WebSocket | null = null;
-    const ws = new WebSocket(`ws://${server}/connections?token=${secret}`);
 
-    ws.addEventListener("message", (event) => {
+    getInfomation().then((result) => {
-      const data = JSON.parse(event.data) as ApiType.Connections;
+      const { server = "", secret = "" } = result;
-      setConn(data);
+      ws = new WebSocket(`ws://${server}/connections?token=${secret}`);
+
+      ws.addEventListener("message", (event) => {
+        const data = JSON.parse(event.data) as ApiType.Connections;
+        setConn(data);
+      });
     });
 
-    return () => ws.close();
+    return () => ws?.close();
   }, []);
 
   return (

src/pages/log.tsx

@@ -12,16 +12,20 @@ const LogPage = () => {
   const [logData, setLogData] = useState(logCache);
 
   useEffect(() => {
-    const info = getInfomation();
+    let ws: WebSocket | null = null;
-    const ws = new WebSocket(`ws://${info.server}/logs?token=${info.secret}`);
 
-    ws.addEventListener("message", (event) => {
+    getInfomation().then((result) => {
-      const data = JSON.parse(event.data) as ApiType.LogItem;
+      const { server = "", secret = "" } = result;
-      const time = dayjs().format("MM-DD HH:mm:ss");
+      ws = new WebSocket(`ws://${server}/logs?token=${secret}`);
-      setLogData((l) => (logCache = [...l, { ...data, time }]));
+
+      ws.addEventListener("message", (event) => {
+        const data = JSON.parse(event.data) as ApiType.LogItem;
+        const time = dayjs().format("MM-DD HH:mm:ss");
+        setLogData((l) => (logCache = [...l, { ...data, time }]));
+      });
     });
 
-    return () => ws.close();
+    return () => ws?.close();
   }, []);
 
   return (

src/services/api.ts

@@ -1,32 +1,41 @@
 import axios, { AxiosInstance } from "axios";
+import { getClashInfo } from "./cmds";
 import { ApiType } from "./types";
 
 let axiosIns: AxiosInstance = null!;
-let server = "127.0.0.1:9090";
+let server = "";
 let secret = "";
 
-type Callback<T> = (data: T) => void;
-
 /// initialize some infomation
-export function initAxios(info: { server?: string; secret?: string }) {
+export async function getAxios() {
-  if (info.server) server = info.server;
+  if (axiosIns) return axiosIns;
-  if (info.secret) secret = info.secret;
+
+  try {
+    const info = await getClashInfo();
+
+    if (info?.controller?.server) server = info?.controller?.server;
+    if (info?.controller?.secret) secret = info?.controller?.secret;
+  } catch {}
 
   axiosIns = axios.create({
     baseURL: `http://${server}`,
     headers: secret ? { Authorization: `Bearer ${secret}` } : {},
   });
   axiosIns.interceptors.response.use((r) => r.data);
+  return axiosIns;
 }
 
 /// get infomation
-export function getInfomation() {
+export async function getInfomation() {
-  return { server, secret };
+  if (server) return { server, secret };
+  const info = await getClashInfo();
+  return info?.controller!;
 }
 
 /// Get Version
 export async function getVersion() {
-  return axiosIns.get("/version") as Promise<{
+  const instance = await getAxios();
+  return instance.get("/version") as Promise<{
     premium: boolean;
     version: string;
   }>;
@@ -34,27 +43,32 @@ export async function getVersion() {
 
 /// Get current base configs
 export async function getClashConfig() {
-  return axiosIns.get("/configs") as Promise<ApiType.ConfigData>;
+  const instance = await getAxios();
+  return instance.get("/configs") as Promise<ApiType.ConfigData>;
 }
 
 /// Update current configs
 export async function updateConfigs(config: Partial<ApiType.ConfigData>) {
-  return axiosIns.patch("/configs", config);
+  const instance = await getAxios();
+  return instance.patch("/configs", config);
 }
 
 /// Get current rules
 export async function getRules() {
-  return axiosIns.get("/rules") as Promise<ApiType.RuleItem[]>;
+  const instance = await getAxios();
+  return instance.get("/rules") as Promise<ApiType.RuleItem[]>;
 }
 
 /// Update the Proxy Choose
 export async function updateProxy(group: string, proxy: string) {
-  return axiosIns.put(`/proxies/${group}`, { name: proxy });
+  const instance = await getAxios();
+  return instance.put(`/proxies/${group}`, { name: proxy });
 }
 
 /// Get the Proxy infomation
 export async function getProxies() {
-  const response = await axiosIns.get<any, any>("/proxies");
+  const instance = await getAxios();
+  const response = await instance.get<any, any>("/proxies");
   const proxies = (response?.proxies ?? {}) as Record<
     string,
     ApiType.ProxyItem