From dfd4ab791e984635958c8454ab0961cc6e3df66f Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Sun, 19 Apr 2026 14:33:12 +0800
Subject: [PATCH] fix(web): fix system status card stuck in loading state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fetchStatus(showLoading=false) never called setLoading(false), so the
initial loading=true was never cleared. Simplify to always setLoading
in the finally block — the spinner only shows on the very first load
since subsequent fetches complete near-instantly.
---
 .../components/overview-cards/SystemStatusCards.tsx  | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/web/src/app/home/monitoring/components/overview-cards/SystemStatusCards.tsx b/web/src/app/home/monitoring/components/overview-cards/SystemStatusCards.tsx
index ed8c3a58..6db46959 100644
--- a/web/src/app/home/monitoring/components/overview-cards/SystemStatusCards.tsx
+++ b/web/src/app/home/monitoring/components/overview-cards/SystemStatusCards.tsx
@@ -43,8 +43,7 @@ export default function SystemStatusCard({
   const [boxStatus, setBoxStatus] = useState<ApiRespBoxStatus | null>(null);
   const [loading, setLoading] = useState(true);
 
-  const fetchStatus = useCallback(async (showLoading = false) => {
-    if (showLoading) setLoading(true);
+  const fetchStatus = useCallback(async () => {
     try {
       const [plugin, box] = await Promise.all([
         httpClient.getPluginSystemStatus().catch(() => null),
@@ -53,14 +52,13 @@ export default function SystemStatusCard({
       setPluginStatus(plugin);
       setBoxStatus(box);
     } finally {
-      if (showLoading) setLoading(false);
+      setLoading(false);
     }
   }, []);
 
   useEffect(() => {
-    // refreshKey changes when the user clicks "Refresh Data"
-    fetchStatus(refreshKey === undefined);
-    const interval = setInterval(() => fetchStatus(false), 30_000);
+    fetchStatus();
+    const interval = setInterval(fetchStatus, 30_000);
     return () => clearInterval(interval);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetchStatus, refreshKey]);
@@ -90,7 +88,7 @@ export default function SystemStatusCard({
   return (
     <Popover
       onOpenChange={(open) => {
-        if (open) fetchStatus(false);
+        if (open) fetchStatus();
       }}
     >
       <PopoverTrigger asChild>