Implement preemptive data loading and remove image loading from tooltips

🚀 Performance Optimizations:
- Added BackgroundDataService for preemptive tree data loading
- Background loading starts immediately after user authentication
- Map uses cached data when available (instant loading)
- Removed image loading from tree tooltips for better performance
- Optimized batch processing (100 trees/batch, 10ms delays)
- Auto-clear cache on logout for fresh sessions

📱 Map Improvements:
- ES6 module imports for better code organization
- Fixed module loading and exports
- Reduced popup size (removed images, cleaner UI)
- Faster map initialization with cached data
- Progress indicators during background loading

🔧 Technical Changes:
- Background loading happens parallel to user interaction
- Smart caching prevents redundant API calls
- Graceful fallback if background loading fails
- Console logging with emojis for better debugging

static/index.html

@@ -947,7 +947,7 @@
         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.1';
-            const timestamp = '1761507058'; // Cache-busting bump
+            const timestamp = '1761507500'; // 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=1761507058"></script>
+    <script type="module" src="/static/js/tree-track-app.js?v=5.1.1&t=1761507500"></script>
     
     <script>
         // Idle-time prefetch of map assets to speed up first navigation

static/js/modules/auth-manager.js

@@ -2,6 +2,8 @@
  * Authentication Manager Module
  * Handles user authentication, session management, and permissions
  */
+import { backgroundDataService } from './background-data.js';
+
 export class AuthManager {
     constructor() {
         this.currentUser = null;
@@ -25,6 +27,17 @@ export class AuthManager {
                 const data = await response.json();
                 this.currentUser = data.user;
                 this.authToken = token;
+                
+                // Start background data loading immediately after successful auth
+                try {
+                    backgroundDataService.setAuthToken(token);
+                    backgroundDataService.startPreemptiveLoading().catch(error => {
+                        console.warn('Background data preloading failed:', error);
+                    });
+                } catch (error) {
+                    console.warn('Failed to start background data loading:', error);
+                }
+                
                 return true;
             } else {
                 this.clearAuthData();
@@ -57,6 +70,13 @@ export class AuthManager {
         localStorage.removeItem('user_info');
         this.currentUser = null;
         this.authToken = null;
+        
+        // Clear background data cache when user logs out
+        try {
+            backgroundDataService.clearCache();
+        } catch (error) {
+            console.warn('Failed to clear background data cache:', error);
+        }
     }
 
     canEditTree(createdBy) {

static/js/modules/background-data.js

@@ -0,0 +1,191 @@
+/**
+ * Background Data Service
+ * Handles preemptive loading of tree data for better performance
+ */
+export class BackgroundDataService {
+    constructor() {
+        this.treeDataCache = null;
+        this.isLoading = false;
+        this.loadPromise = null;
+        this.authToken = null;
+        this.batchSize = 1000;
+    }
+
+    setAuthToken(token) {
+        this.authToken = token;
+    }
+
+    async authenticatedFetch(url, options = {}) {
+        if (!this.authToken) {
+            throw new Error('No auth token available');
+        }
+
+        const headers = {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${this.authToken}`,
+            ...options.headers
+        };
+        
+        const response = await fetch(url, {
+            ...options,
+            headers
+        });
+        
+        if (response.status === 401) {
+            // Token expired or invalid
+            localStorage.removeItem('auth_token');
+            localStorage.removeItem('user_info');
+            window.location.href = '/login';
+            return null;
+        }
+        
+        return response;
+    }
+
+    /**
+     * Start preemptive loading of all tree data
+     */
+    async startPreemptiveLoading() {
+        if (this.isLoading || this.treeDataCache) {
+            return this.loadPromise;
+        }
+
+        console.log('🚀 Starting preemptive tree data loading...');
+        this.isLoading = true;
+
+        this.loadPromise = this.loadAllTreesInBackground();
+        return this.loadPromise;
+    }
+
+    /**
+     * Load all trees in background with batching
+     */
+    async loadAllTreesInBackground() {
+        try {
+            let allTrees = [];
+            let offset = 0;
+            let hasMoreTrees = true;
+            
+            console.log('📦 Loading trees in background batches...');
+            
+            while (hasMoreTrees && allTrees.length < 3000) { // Safety limit
+                console.log(`📥 Background batch: offset=${offset}, limit=${this.batchSize}`);
+                
+                const response = await this.authenticatedFetch(`/api/trees?limit=${this.batchSize}&offset=${offset}`);
+                if (!response) {
+                    console.error('❌ Failed to fetch background batch');
+                    break;
+                }
+                
+                const batchTrees = await response.json();
+                console.log(`✅ Background batch loaded: ${batchTrees.length} trees`);
+                
+                if (batchTrees.length === 0) {
+                    hasMoreTrees = false;
+                    break;
+                }
+                
+                allTrees = allTrees.concat(batchTrees);
+                offset += this.batchSize;
+                
+                // If we got less than the batch size, we've reached the end
+                if (batchTrees.length < this.batchSize) {
+                    hasMoreTrees = false;
+                }
+                
+                // Small delay to prevent overwhelming the server
+                await this.delay(100);
+            }
+            
+            // Filter out problematic trees
+            const filteredTrees = allTrees.filter(tree => {
+                // Exclude tree ID 18
+                if (tree.id === 18) {
+                    console.log('🔄 Background: Excluding tree ID 18 from cache');
+                    return false;
+                }
+                return true;
+            });
+            
+            this.treeDataCache = filteredTrees;
+            this.isLoading = false;
+            
+            console.log(`🎉 Background loading complete: ${filteredTrees.length} trees cached`);
+            
+            // Dispatch custom event to notify that data is ready
+            window.dispatchEvent(new CustomEvent('treeDataReady', { 
+                detail: { count: filteredTrees.length } 
+            }));
+            
+            return filteredTrees;
+            
+        } catch (error) {
+            console.error('❌ Background tree loading failed:', error);
+            this.isLoading = false;
+            throw error;
+        }
+    }
+
+    /**
+     * Get cached tree data (returns immediately if available)
+     */
+    getCachedTreeData() {
+        return this.treeDataCache;
+    }
+
+    /**
+     * Check if data is ready
+     */
+    isDataReady() {
+        return this.treeDataCache !== null;
+    }
+
+    /**
+     * Get tree data - uses cache if available, otherwise loads
+     */
+    async getTreeData() {
+        if (this.treeDataCache) {
+            console.log('⚡ Using cached tree data');
+            return this.treeDataCache;
+        }
+        
+        if (this.isLoading) {
+            console.log('⏳ Waiting for background loading to complete...');
+            return await this.loadPromise;
+        }
+        
+        console.log('🔄 Cache miss, loading trees now...');
+        return await this.startPreemptiveLoading();
+    }
+
+    /**
+     * Clear cached data (useful for refresh scenarios)
+     */
+    clearCache() {
+        this.treeDataCache = null;
+        this.isLoading = false;
+        this.loadPromise = null;
+        console.log('🗑️ Tree data cache cleared');
+    }
+
+    /**
+     * Simple delay utility
+     */
+    delay(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    /**
+     * Get loading status for UI feedback
+     */
+    getLoadingStatus() {
+        return {
+            isLoading: this.isLoading,
+            isReady: this.isDataReady(),
+            cacheSize: this.treeDataCache ? this.treeDataCache.length : 0
+        };
+    }
+}
+
+// Export singleton instance
+export const backgroundDataService = new BackgroundDataService();

static/map.html

@@ -928,7 +928,7 @@
         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.1';
-const timestamp = '1761507058'; // Current timestamp for cache busting
+const timestamp = '1761507500'; // Current timestamp for cache busting
             const lastVersion = sessionStorage.getItem('treetrack_version');
             const lastTimestamp = sessionStorage.getItem('treetrack_timestamp');
             
@@ -1081,27 +1081,13 @@ const timestamp = '1761507058'; // 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=1761507058">
-    
-                    "default-state": {
-                        gradients: [
-                            ['#0f172a', '#1e293b', '#16a085'],
-                            ['#1a202c', '#2d3748', '#27ae60'], 
-                            ['#2d3748', '#4a5568', '#2ecc71'],
-                            ['#1a365d', '#2c5282', '#138d75'],
-                            ['#0f172a', '#2d3748', '#16a085']
-                        ],
-                        transitionSpeed: 12000
-                    }
-                }
-            });
-            
-            // Defer any heavy data fetch; ensure map shell is visible first
-            if (window.requestAnimationFrame) {
-                requestAnimationFrame(() => setTimeout(() => {
-                    try { if (window.MapApp && window.MapApp.loadVisibleTrees) { window.MapApp.loadVisibleTrees(); } } catch(_) {}
-                }, 0));
-            }
+<script type="module">
+        // Import and initialize the map with background data service
+        import('./map.js?v=5.1.1&t=1761507058').then(module => {
+            // Map initialization is handled in the module
+            console.log('🗺️ Map module loaded with background data service');
+        }).catch(error => {
+            console.error('❌ Failed to load map module:', error);
         });
     </script>
 </body>

static/map.js

@@ -1,3 +1,6 @@
+// Import background data service
+import { backgroundDataService } from './js/modules/background-data.js';
+
 // TreeTrack Enhanced Map with Authentication and Tree Management
 class TreeTrackMap {
     constructor() {
@@ -61,6 +64,13 @@ class TreeTrackMap {
                 const data = await response.json();
                 this.currentUser = data.user;
                 this.authToken = token;
+                
+                // Start preemptive data loading in background
+                backgroundDataService.setAuthToken(token);
+                backgroundDataService.startPreemptiveLoading().catch(error => {
+                    console.warn('Background data loading failed:', error);
+                });
+                
                 return true;
             } else {
                 // Token invalid, remove it
@@ -590,108 +600,80 @@ class TreeTrackMap {
     }
 
     async loadTrees() {
-        console.log('Loading trees...');
+        console.log('🌳 Loading trees for map visualization...');
         
         try {
-            // Load trees in batches to work around API limits
-            let allTrees = [];
-            let offset = 0;
-            const batchSize = 1000; // API batch size (Supabase limit)
-            let hasMoreTrees = true;
-            
             // Clear existing tree markers
             this.clearTreeMarkers();
             
-            console.log('Loading trees in batches to handle large dataset...');
+            // Try to use cached data first
+            let filteredTrees;
+            const cachedTrees = backgroundDataService.getCachedTreeData();
             
-            while (hasMoreTrees && allTrees.length < 3000) { // Safety limit
-                console.log(`Loading batch: offset=${offset}, limit=${batchSize}`);
-                
-                const response = await this.authenticatedFetch(`/api/trees?limit=${batchSize}&offset=${offset}`);
-                if (!response) {
-                    console.error('Failed to fetch batch');
-                    break;
-                }
-                
-                const batchTrees = await response.json();
-                console.log(`Loaded batch: ${batchTrees.length} trees`);
-                
-                if (batchTrees.length === 0) {
-                    hasMoreTrees = false;
-                    break;
-                }
-                
-                allTrees = allTrees.concat(batchTrees);
-                offset += batchSize;
-                
-                // If we got less than the batch size, we've reached the end
-                if (batchTrees.length < batchSize) {
-                    hasMoreTrees = false;
-                }
+            if (cachedTrees) {
+                console.log('⚡ Using preloaded tree data from cache');
+                filteredTrees = cachedTrees;
+            } else {
+                // Show loading message
+                document.getElementById('treeCount').textContent = 'Loading trees...';
                 
-                // Update progress
-                document.getElementById('treeCount').textContent = `${allTrees.length} trees loaded...`;
+                // Wait for background loading or load now
+                console.log('⏳ Getting tree data (background loading)...');
+                const allTrees = await backgroundDataService.getTreeData();
+                filteredTrees = allTrees;
             }
             
-            console.log(`Total trees loaded: ${allTrees.length}`);
-
-            // Filter out specific trees (e.g., ID 18 as requested)
-            const filteredTrees = allTrees.filter(tree => {
-                // Exclude tree ID 18
-                if (tree.id === 18) {
-                    console.log('Excluding tree ID 18 from display');
-                    return false;
-                }
-                return true;
-            });
+            console.log(`📊 Processing ${filteredTrees.length} trees for map display`);
 
-            console.log(`Filtered trees: ${filteredTrees.length} (excluded ${allTrees.length - filteredTrees.length})`);
-
-            // Add tree markers with progress tracking and UI batch processing
+            // Add tree markers with optimized batch processing
             let loadedCount = 0;
-            const uiBatchSize = 50; // UI processing batch size for smooth rendering
+            const uiBatchSize = 100; // Increased batch size for faster processing
             
+            // Process all batches immediately for faster loading
+            const batches = [];
             for (let i = 0; i < filteredTrees.length; i += uiBatchSize) {
-                const batch = filteredTrees.slice(i, i + uiBatchSize);
+                batches.push(filteredTrees.slice(i, i + uiBatchSize));
+            }
+            
+            // Process batches with minimal delays
+            for (let batchIndex = 0; batchIndex < batches.length; batchIndex++) {
+                const batch = batches[batchIndex];
                 
-                // Process batch with small delay to prevent UI blocking
-                setTimeout(() => {
-                    batch.forEach((tree) => {
-                        try {
-                            this.addTreeMarker(tree);
-                            loadedCount++;
-                        } catch (error) {
-                            console.warn(`Failed to add tree marker for tree ${tree.id}:`, error);
-                        }
-                    });
-                    
-                    // Update progress
-                    document.getElementById('treeCount').textContent = `${loadedCount} trees`;
-                    
-                    // If this is the last batch, finalize
-                    if (i + uiBatchSize >= filteredTrees.length) {
-                        console.log(`Map loading complete: ${loadedCount} tree markers added`);
-                        this.showMessage(`Loaded ${loadedCount} trees successfully`, 'success');
-                    }
-                }, (i / uiBatchSize) * 50); // Stagger UI batches by 50ms
+                // Use requestAnimationFrame for smoother UI updates
+                await new Promise(resolve => {
+                    setTimeout(() => {
+                        batch.forEach((tree) => {
+                            try {
+                                this.addTreeMarker(tree);
+                                loadedCount++;
+                            } catch (error) {
+                                console.warn(`Failed to add marker for tree ${tree.id}:`, error);
+                            }
+                        });
+                        
+                        // Update progress
+                        document.getElementById('treeCount').textContent = `${loadedCount} trees`;
+                        resolve();
+                    }, batchIndex * 10); // Minimal 10ms delays
+                });
             }
 
-            // Auto-center on trees with clustering-friendly zoom after loading completes
+            console.log(`🎉 Map loading complete: ${loadedCount} tree markers added`);
+            this.showMessage(`Loaded ${loadedCount} trees successfully`, 'success');
+
+            // Auto-center on trees with clustering-friendly zoom
             setTimeout(() => {
                 if (loadedCount > 0) {
-                    // Get bounds of all tree markers
                     const group = new L.featureGroup(this.treeMarkers);
                     const bounds = group.getBounds();
-                    
-                    // Center on trees with clustering-optimized zoom level
                     this.map.fitBounds(bounds, { padding: [20, 20], maxZoom: 15 });
-                    console.log('Map auto-centered on trees with clustering view');
+                    console.log('🎯 Map auto-centered with clustering view');
                 }
-            }, 2000); // Wait for most UI batches to complete
+            }, 100); // Reduced delay since loading is faster
 
         } catch (error) {
-            console.error('Error loading trees:', error);
-            this.showMessage('Failed to load trees', 'error');
+            console.error('❌ Error loading trees:', error);
+            this.showMessage('Failed to load trees. Please refresh the page.', 'error');
         }
     }
 
@@ -850,41 +832,12 @@ class TreeTrackMap {
         const canEdit = this.canEditTree(tree.created_by);
         const canDelete = this.canDeleteTree(tree.created_by);
         
-        // Process tree images for display
-        let imageHtml = '';
-        if (tree.photographs && typeof tree.photographs === 'object') {
-            const photos = tree.photographs;
-            const photoTypes = ['full tree', 'leaf', 'bark', 'flower', 'fruit', 'seed'];
-            
-            // Find the best photo to display (prioritize full tree, then others)
-            let displayPhoto = null;
-            let displayType = null;
-            
-            for (const type of photoTypes) {
-                if (photos[type]) {
-                    displayPhoto = photos[type];
-                    displayType = type;
-                    break;
-                }
-            }
-            
-            if (displayPhoto) {
-                imageHtml = `
-                    <div style="margin-bottom: 16px; text-align: center;">
-                        <img src="${displayPhoto}" 
-                             alt="${treeName} - ${displayType}" 
-                             style="width: 100%; max-width: 200px; height: 120px; object-fit: cover; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"
-                             onerror="this.style.display='none'"/>
-                        <div style="font-size: 11px; color: #6b7280; margin-top: 4px; text-transform: capitalize;">${displayType}</div>
-                    </div>
-                `;
-            }
-        }
+        // Note: Image loading removed for better performance
 
         const popupContent = `
-            <div style="width: 320px; max-width: 90vw; font-family: 'Segoe UI', sans-serif; position: relative;">
-                <div style="padding: 20px; padding-bottom: 16px;">
-                    ${imageHtml}
+            <div style="width: 300px; max-width: 90vw; font-family: 'Segoe UI', sans-serif; position: relative;">
+                <div style="padding: 16px;">
+                    <!-- Image loading removed for better performance -->
                     <div style="display: flex; justify-content: between; align-items: flex-start; margin-bottom: 16px;">
                         <div style="flex: 1;">
                             <h3 style="margin: 0 0 8px 0; color: #059669; font-size: 18px; font-weight: 600; line-height: 1.2; word-wrap: break-word;">
@@ -1059,6 +1012,12 @@ ${tree.height ? `<strong style="color: #374151;">Height:</strong><span>${tree.he
 // Initialize map when DOM is loaded
 let mapApp;
 document.addEventListener('DOMContentLoaded', () => {
-    console.log('DOM loaded, initializing TreeTrack Map...');
+    console.log('🗺️ DOM loaded, initializing TreeTrack Map with background data service...');
     mapApp = new TreeTrackMap();
+    
+    // Expose globally for popup button callbacks
+    window.mapApp = mapApp;
 });
+
+// Export for ES6 module usage
+export { TreeTrackMap };

static/sw.js

@@ -1,5 +1,5 @@
 // TreeTrack Service Worker - PWA and Offline Support
-const VERSION = 1761507058; // Cache busting bump - force clients to fetch new static assets and header image change
+const VERSION = 1761507500; // 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": 1761507058
+  "timestamp": 1761507500
 }