From 1f41f3df5c4a6adf2ede4b65ab793c42151bd7d7 Mon Sep 17 00:00:00 2001
From: Username <user@mymx.me>
Date: Fri, 26 Dec 2025 19:58:20 +0100
Subject: [PATCH] dashboard: pause polling when tab is hidden

---
 static/dashboard.js | 36 ++++++++++++++++++++++++++++++++++--
 static/style.css    |  1 +
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/static/dashboard.js b/static/dashboard.js
index 91ad179..f408c30 100644
--- a/static/dashboard.js
+++ b/static/dashboard.js
@@ -662,5 +662,37 @@ function fetchStats() {
         .catch(function(e) { $('dot').className = 'dot err'; $('statusTxt').textContent = 'Error'; });
 }
 
-fetchStats();
-setInterval(fetchStats, 3000);
+// Visibility-aware polling - pause when tab is hidden
+var pollInterval = null;
+var pollDelay = 3000;
+
+function startPolling() {
+    if (!pollInterval) {
+        fetchStats();  // Fetch immediately
+        pollInterval = setInterval(fetchStats, pollDelay);
+    }
+}
+
+function stopPolling() {
+    if (pollInterval) {
+        clearInterval(pollInterval);
+        pollInterval = null;
+        $('dot').className = 'dot warn';
+        $('statusTxt').textContent = 'Paused';
+    }
+}
+
+function handleVisibilityChange() {
+    if (document.hidden) {
+        stopPolling();
+    } else {
+        startPolling();
+    }
+}
+
+document.addEventListener('visibilitychange', handleVisibilityChange);
+
+// Initial start
+if (!document.hidden) {
+    startPolling();
+}
diff --git a/static/style.css b/static/style.css
index d557eff..3757419 100644
--- a/static/style.css
+++ b/static/style.css
@@ -86,6 +86,7 @@ h3 { font-size: 13px; font-weight: 600; color: var(--dim); margin-bottom: 8px; }
 .status-item { display: flex; align-items: center; gap: 4px; }
 .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
 .dot.err { background: var(--red); animation: none; }
+.dot.warn { background: var(--yellow); animation: none; }
 @keyframes pulse { 50% { opacity: 0.5; } }
 .mode-badge { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
 .mode-ssl { background: rgba(63,185,80,0.2); color: var(--green); border: 1px solid var(--green); }