From 8c21691478b0a4935ab36cde85c2c4162030184f Mon Sep 17 00:00:00 2001
From: yunyaozhou <admin@shujk.top>
Date: Mon, 29 Jun 2026 18:23:04 +0800
Subject: [PATCH] lazy load admin ui data by page

---
 ui-src/src/App.tsx | 53 +++++++++++++++++++++++++++++++++++-----------
 1 file changed, 41 insertions(+), 12 deletions(-)

diff --git a/ui-src/src/App.tsx b/ui-src/src/App.tsx
index eda95ea..1764c54 100644
--- a/ui-src/src/App.tsx
+++ b/ui-src/src/App.tsx
@@ -551,11 +551,29 @@ export default function App() {
     }
   }
 
-  async function refreshLiveData() {
+  async function loadPageData(targetPage: PageKey, { incrementalLogs = true } = {}) {
+    if (targetPage === "requests") {
+      await loadRequests();
+      return;
+    }
+    if (targetPage === "profiles") {
+      await loadProfiles();
+      return;
+    }
+    if (targetPage === "logs") {
+      await loadLogs(incrementalLogs && latestLogSeq > 0);
+    }
+  }
+
+  async function refreshLiveData(targetPage: PageKey = page) {
     if (restoreRequested || switchingTo) {
       return;
     }
-    await Promise.all([loadStatus(false), loadRequests(), loadProfiles(), loadLogs(true)]);
+    const tasks: Array<Promise<unknown>> = [loadStatus(false)];
+    if (targetPage !== "overview" && targetPage !== "rules") {
+      tasks.push(loadPageData(targetPage, { incrementalLogs: true }));
+    }
+    await Promise.all(tasks);
   }
 
   useEffect(() => {
@@ -580,19 +598,28 @@ export default function App() {
   }, []);
 
   useEffect(() => {
-    Promise.all([loadStatus(true), loadRequests(), loadProfiles(), loadLogs(false)]).catch((error) => {
+    loadStatus(true).catch((error) => {
       setRuleMessage({ text: error?.message || String(error), tone: "error" });
     });
   }, []);
 
   useEffect(() => {
-      const timer = window.setInterval(() => {
-        refreshLiveData().catch((error) => {
-          setRuleMessage({ text: error?.message || String(error), tone: "error" });
-        });
-      }, 2500);
+    const timer = window.setInterval(() => {
+      refreshLiveData().catch((error) => {
+        setRuleMessage({ text: error?.message || String(error), tone: "error" });
+      });
+    }, 2500);
     return () => window.clearInterval(timer);
-  });
+  }, [page, requestQuery, requestFilter, latestLogSeq, restoreRequested, switchingTo]);
+
+  useEffect(() => {
+    if (page === "overview" || page === "rules") {
+      return;
+    }
+    loadPageData(page, { incrementalLogs: false }).catch((error) => {
+      setRuleMessage({ text: error?.message || String(error), tone: "error" });
+    });
+  }, [page]);
 
   useEffect(() => {
     if (page !== "profiles" || !shouldSyncProfileFormToActive) {
@@ -631,7 +658,6 @@ export default function App() {
       });
       setStatus(payload);
       setRuleForm(ruleFormFromStatus(payload));
-      await Promise.all([loadRequests(), loadLogs(false)]);
       setRuleMessage({ text: "配置已保存，并已对当前 gateway 立即生效。", tone: "success" });
     } catch (error) {
       setRuleMessage({ text: error instanceof Error ? error.message : String(error), tone: "error" });
@@ -639,13 +665,16 @@ export default function App() {
   }
 
   useEffect(() => {
+    if (page !== "requests") {
+      return;
+    }
     const timer = window.setTimeout(() => {
       loadRequests().catch((error) => {
         setRuleMessage({ text: error?.message || String(error), tone: "error" });
       });
     }, 180);
     return () => window.clearTimeout(timer);
-  }, [requestQuery, requestFilter]);
+  }, [page, requestQuery, requestFilter]);
 
   async function saveProfile(event: FormEvent) {
     event.preventDefault();
@@ -780,7 +809,7 @@ export default function App() {
         if (payload.config?.profile_name === profileName) {
           setSwitchingTo("");
           setShouldSyncProfileFormToActive(true);
-          Promise.all([loadStatus(true), loadRequests(), loadProfiles(), loadLogs(false)]).catch(() => {});
+          Promise.all([loadStatus(true), loadProfiles()]).catch(() => {});
           return;
         }
       } catch {