Fix UI blocking in form page initialization by loading data async

static/index.html

@@ -947,7 +947,7 @@
         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.1';
-            const timestamp = '1762282516'; // Cache-busting bump
+            const timestamp = '1762282760'; // Cache-busting bump
             const lastVersion = sessionStorage.getItem('treetrack_version');
             const lastTimestamp = sessionStorage.getItem('treetrack_timestamp');
             
@@ -1193,7 +1193,7 @@
         </div>
     </div>
 
-    <script type="module" src="/static/js/tree-track-app.js?v=5.1.1&t=1762282516"></script>
+    <script type="module" src="/static/js/tree-track-app.js?v=5.1.1&t=1762282760"></script>
     
     <script>
         // Idle-time prefetch of map assets to speed up first navigation

static/js/tree-track-app.js

@@ -32,16 +32,23 @@ export class TreeTrackApp {
                 return;
             }
             
-            // Initialize all managers
-            await this.initializeManagers();
+            // Initialize UI immediately for responsiveness
+            this.uiManager.initialize();
             
-            // Setup event listeners
+            // Setup event listeners early so UI is interactive
             this.setupEventListeners();
             
-
+            // Load data-dependent managers and initial data in background
+            // This prevents blocking the UI while fetching from API
+            this.initializeManagers().catch(error => {
+                console.error('Error initializing managers:', error);
+                this.uiManager.showMessage('Error loading form data: ' + error.message, 'error');
+            });
             
-            // Load initial data
-            await this.loadInitialData();
+            this.loadInitialData().catch(error => {
+                console.error('Error loading initial data:', error);
+                this.uiManager.showMessage('Error loading tree data: ' + error.message, 'error');
+            });
             
         } catch (error) {
             console.error('Error initializing TreeTrack app:', error);
@@ -50,10 +57,7 @@ export class TreeTrackApp {
     }
 
     async initializeManagers() {
-        // Initialize UI first
-        this.uiManager.initialize();
-        
-        // Initialize form components
+        // Initialize form components (loads options from API)
         await this.formManager.initialize();
         
         // Initialize media handling

static/map.html

@@ -968,7 +968,7 @@
         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.1';
-const timestamp = '1762282516'; // Current timestamp for cache busting
+const timestamp = '1762282760'; // Current timestamp for cache busting
             const lastVersion = sessionStorage.getItem('treetrack_version');
             const lastTimestamp = sessionStorage.getItem('treetrack_timestamp');
             
@@ -1137,7 +1137,7 @@ const timestamp = '1762282516'; // Current timestamp for cache busting
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <!-- Leaflet MarkerCluster JS for performance and grouping -->
     <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
-<script src="/static/map.js?v=5.1.1&t=1762282516"></script>
+<script src="/static/map.js?v=5.1.1&t=1762282760"></script>
     <script>
         console.log('🗺️ Map script loaded successfully');
     </script>

static/sw.js

@@ -1,5 +1,5 @@
 // TreeTrack Service Worker - PWA and Offline Support
-const VERSION = 1762282516; // Cache busting bump - force clients to fetch new static assets and header image change
+const VERSION = 1762282760; // Cache busting bump - force clients to fetch new static assets and header image change
 const CACHE_NAME = `treetrack-v${VERSION}`;
 const STATIC_CACHE = `static-v${VERSION}`;
 const API_CACHE = `api-v${VERSION}`;

version.json

@@ -1,4 +1,4 @@
 {
   "version": "5.1.1",
-  "timestamp": 1762282516
+  "timestamp": 1762282760
 }