From ef6692984852491b66eb46d58151ada3ada2f280 Mon Sep 17 00:00:00 2001
From: James Smith <jsmith@Jamess-MacBook-Pro.local>
Date: Thu, 25 Dec 2025 08:47:16 +0000
Subject: [PATCH] Fix browser freeze with many aircraft by batching UI updates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 templates/adsb_dashboard.html | 42 ++++++++++++++++++++++++++---------
 1 file changed, 31 insertions(+), 11 deletions(-)

diff --git a/templates/adsb_dashboard.html b/templates/adsb_dashboard.html
index ae97b7c..27062c1 100644
--- a/templates/adsb_dashboard.html
+++ b/templates/adsb_dashboard.html
@@ -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) {
             const icao = data.icao;
             if (!icao) return;
@@ -770,22 +796,16 @@
                 lastSeen: Date.now()
             };
 
-            // Update marker on map
+            // Queue marker update
             if (data.lat && data.lon) {
-                updateMarker(icao);
+                pendingMarkerUpdates.add(icao);
             }
 
-            // Update UI
-            updateStats();
-            renderAircraftList();
-
-            // Update selected aircraft panel
-            if (selectedIcao === icao) {
-                showAircraftDetails(icao);
-            }
+            // Schedule batched UI update
+            scheduleUIUpdate();
         }
 
-        function updateMarker(icao) {
+        function updateMarkerImmediate(icao) {
             const ac = aircraft[icao];
             if (!ac || !ac.lat || !ac.lon) return;