From fc56cbd66158c36794995d77651783ba9c053c93 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 12 Feb 2026 08:30:58 +0100
Subject: [PATCH] refactor: update tick interval for real-time display in
 dashboard components and enhance live indicator in Chart component

---
 app/share/[id]/page.tsx        | 4 ++--
 app/sites/[id]/page.tsx        | 4 ++--
 components/dashboard/Chart.tsx | 6 +++++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/share/[id]/page.tsx b/app/share/[id]/page.tsx
index dae6587..4ea7408 100644
--- a/app/share/[id]/page.tsx
+++ b/app/share/[id]/page.tsx
@@ -92,9 +92,9 @@ export default function PublicDashboardPage() {
     return () => clearInterval(interval)
   }, [data, isPasswordProtected, dateRange, todayInterval, multiDayInterval, password])
 
-  // * Tick every 5s to refresh "Updated X ago" display
+  // * Tick every 1s so "Live · Xs ago" counts in real time
   useEffect(() => {
-    const interval = setInterval(() => setTick((t) => t + 1), 5000)
+    const interval = setInterval(() => setTick((t) => t + 1), 1000)
     return () => clearInterval(interval)
   }, [])
 
diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index ac9bd4c..bd191cf 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -138,9 +138,9 @@ export default function SiteDashboardPage() {
     return () => clearInterval(interval)
   }, [siteId, dateRange, todayInterval, multiDayInterval, isSettingsLoaded])
 
-  // * Tick every 5s to refresh "Updated X ago" display
+  // * Tick every 1s so "Live · Xs ago" counts in real time
   useEffect(() => {
-    const interval = setInterval(() => setTick((t) => t + 1), 5000)
+    const interval = setInterval(() => setTick((t) => t + 1), 1000)
     return () => clearInterval(interval)
   }, [])
 
diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index b94e468..85c104b 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -416,9 +416,13 @@ export default function Chart({
       {/* * Subtle live/updated indicator in bottom-right corner */}
       {lastUpdatedAt != null && (
         <div
-          className="absolute bottom-3 right-6 text-xs text-neutral-500 dark:text-neutral-400 pointer-events-none"
+          className="absolute bottom-3 right-6 flex items-center gap-1.5 text-xs text-neutral-500 dark:text-neutral-400 pointer-events-none"
           title="Data refreshes every 30 seconds"
         >
+          <span className="relative flex h-1.5 w-1.5">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
+            <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500" />
+          </span>
           Live · {formatUpdatedAgo(lastUpdatedAt)}
         </div>
       )}