ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

refactor: update tick interval for real-time display in dashboard components and enhance live indicator in Chart component

Browse Source
This commit is contained in:
Usman Baig
2026-02-12 08:30:58 +01:00
parent 9b95ead6ba
commit fc56cbd661
3 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/share/[id]/page.tsx
View File

@@ -92,9 +92,9 @@ export default function PublicDashboardPage() {
return () => clearInterval(interval) return () => clearInterval(interval)
}, [data, isPasswordProtected, dateRange, todayInterval, multiDayInterval, password]) }, [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(() => { useEffect(() => {
const interval = setInterval(() => setTick((t) => t + 1), 5000) const interval = setInterval(() => setTick((t) => t + 1), 1000)
return () => clearInterval(interval) return () => clearInterval(interval)
}, []) }, [])

4
app/sites/[id]/page.tsx
View File

@@ -138,9 +138,9 @@ export default function SiteDashboardPage() {
return () => clearInterval(interval) return () => clearInterval(interval)
}, [siteId, dateRange, todayInterval, multiDayInterval, isSettingsLoaded]) }, [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(() => { useEffect(() => {
const interval = setInterval(() => setTick((t) => t + 1), 5000) const interval = setInterval(() => setTick((t) => t + 1), 1000)
return () => clearInterval(interval) return () => clearInterval(interval)
}, []) }, [])

6
components/dashboard/Chart.tsx
View File

@@ -416,9 +416,13 @@ export default function Chart({
{/* * Subtle live/updated indicator in bottom-right corner */} {/* * Subtle live/updated indicator in bottom-right corner */}
{lastUpdatedAt != null && ( {lastUpdatedAt != null && (
<div <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" 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)} Live · {formatUpdatedAgo(lastUpdatedAt)}
</div> </div>
)} )}