From 32e97cda5a018d6dec637d9825c9a7391eab4c84 Mon Sep 17 00:00:00 2001 From: MHSanaei Date: Mon, 22 Jun 2026 18:27:30 +0200 Subject: [PATCH] fix(inbounds): keep last speed across page navigation instead of blanking Speed is delta-derived, so it can't be recomputed until the first poll after mount. The websocket subscription and speed state are page-scoped (useWebSocket lives in InboundsPage), so leaving to another page and returning blanked the Speed column for up to one 5s poll. Cache the last speed map across mounts (module scope, 15s recency guard) and seed the state from it, so returning shows the last throughput immediately and the next poll refreshes it. Applies to both local and node-hosted inbound speed. --- frontend/src/pages/inbounds/useInbounds.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/inbounds/useInbounds.ts b/frontend/src/pages/inbounds/useInbounds.ts index a7dc9c00b..f37a68bb8 100644 --- a/frontend/src/pages/inbounds/useInbounds.ts +++ b/frontend/src/pages/inbounds/useInbounds.ts @@ -32,6 +32,14 @@ type DBInboundInstance = InstanceType; // deltas accumulated over this window, so dividing by it yields bytes/sec. const TRAFFIC_POLL_INTERVAL_S = 5; +// Speed is delta-derived, so it can't be recomputed until the first poll after +// mount; navigating away and back would otherwise blank the column for up to one +// poll. Cache the last speed map across mounts (module scope) and reseed from it +// while recent, so returning to the page shows the last throughput immediately +// and the next poll refreshes it. +const SPEED_CACHE_TTL_MS = 15000; +let inboundSpeedCache: { at: number; data: Record } = { at: 0, data: {} }; + interface TrafficDelta { Tag: string; Up: number; @@ -191,7 +199,12 @@ export function useInbounds() { const [clientCount, setClientCount] = useState>({}); const [statsVersion, setStatsVersion] = useState(0); - const [inboundSpeed, setInboundSpeed] = useState>({}); + const [inboundSpeed, setInboundSpeed] = useState>(() => + Date.now() - inboundSpeedCache.at < SPEED_CACHE_TTL_MS ? inboundSpeedCache.data : {}, + ); + useEffect(() => { + inboundSpeedCache = { at: Date.now(), data: inboundSpeed }; + }, [inboundSpeed]); const [onlineClients, setOnlineClients] = useState([]); const onlineClientsRef = useRef([]);