mirror of
https://github.com/smittix/intercept.git
synced 2026-06-08 06:01:56 -07:00
Fix browser freeze with many aircraft by batching UI updates
Use requestAnimationFrame to throttle expensive rendering operations. Previously every SSE message triggered full UI re-renders causing browser unresponsiveness with 50+ aircraft. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -759,6 +759,32 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Throttle expensive UI operations to prevent browser freeze
|
||||||
|
let pendingUIUpdate = false;
|
||||||
|
let pendingMarkerUpdates = new Set();
|
||||||
|
|
||||||
|
function scheduleUIUpdate() {
|
||||||
|
if (pendingUIUpdate) return;
|
||||||
|
pendingUIUpdate = true;
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
updateStats();
|
||||||
|
renderAircraftList();
|
||||||
|
|
||||||
|
// Batch marker updates
|
||||||
|
for (const icao of pendingMarkerUpdates) {
|
||||||
|
updateMarkerImmediate(icao);
|
||||||
|
}
|
||||||
|
pendingMarkerUpdates.clear();
|
||||||
|
|
||||||
|
// Update selected aircraft panel
|
||||||
|
if (selectedIcao && aircraft[selectedIcao]) {
|
||||||
|
showAircraftDetails(selectedIcao);
|
||||||
|
}
|
||||||
|
|
||||||
|
pendingUIUpdate = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function updateAircraft(data) {
|
function updateAircraft(data) {
|
||||||
const icao = data.icao;
|
const icao = data.icao;
|
||||||
if (!icao) return;
|
if (!icao) return;
|
||||||
@@ -770,22 +796,16 @@
|
|||||||
lastSeen: Date.now()
|
lastSeen: Date.now()
|
||||||
};
|
};
|
||||||
|
|
||||||
// Update marker on map
|
// Queue marker update
|
||||||
if (data.lat && data.lon) {
|
if (data.lat && data.lon) {
|
||||||
updateMarker(icao);
|
pendingMarkerUpdates.add(icao);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update UI
|
// Schedule batched UI update
|
||||||
updateStats();
|
scheduleUIUpdate();
|
||||||
renderAircraftList();
|
|
||||||
|
|
||||||
// Update selected aircraft panel
|
|
||||||
if (selectedIcao === icao) {
|
|
||||||
showAircraftDetails(icao);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateMarker(icao) {
|
function updateMarkerImmediate(icao) {
|
||||||
const ac = aircraft[icao];
|
const ac = aircraft[icao];
|
||||||
if (!ac || !ac.lat || !ac.lon) return;
|
if (!ac || !ac.lat || !ac.lon) return;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user