Optimize loading performance: parallel API calls, reduced timeouts, progress indicators

Author: elGuille

images/macro-dashboard1.png

@@ -503,12 +503,12 @@ <h2 class="text-base font-medium mb-2 text-slate-900 dark:text-white">Treasury A
 
             console.log(`🔍 Fetching FRED series: ${seriesId}`);
 
-            // Optimized approach - try fastest proxy first with reduced data limit
+            // Fast approach - use only the most reliable proxy with minimal data
             const approaches = [
-                // Approach 1: AllOrigins (most reliable) - reduced data for speed
+                // Primary: AllOrigins (fastest and most reliable) - minimal data for speed
                 async () => {
                     const proxyUrl = 'https://api.allorigins.win/get?url=';
-                    const fredUrl = `https://api.stlouisfed.org/fred/series/observations?series_id=${seriesId}&api_key=${FRED_API_KEY}&file_type=json&limit=120&sort_order=desc`;
+                    const fredUrl = `https://api.stlouisfed.org/fred/series/observations?series_id=${seriesId}&api_key=${FRED_API_KEY}&file_type=json&limit=90&sort_order=desc`;
 
                     const response = await fetch(proxyUrl + encodeURIComponent(fredUrl), {
                         method: 'GET',
@@ -528,26 +528,6 @@ <h2 class="text-base font-medium mb-2 text-slate-900 dark:text-white">Treasury A
                     return data;
                 },
 
-                // Approach 2: CORS Proxy
-                async () => {
-                    const proxyUrl = 'https://corsproxy.io/?';
-                    const fredUrl = `https://api.stlouisfed.org/fred/series/observations?series_id=${seriesId}&api_key=${FRED_API_KEY}&file_type=json&limit=300&sort_order=desc`;
-                    console.log(`📡 Trying CORS Proxy for ${seriesId}...`);
-                    
-                    const response = await fetch(proxyUrl + encodeURIComponent(fredUrl), {
-                        method: 'GET',
-                        headers: { 'Accept': 'application/json' }
-                    });
-                    
-                    if (!response.ok) {
-                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-                    }
-                    
-                    const data = await response.json();
-                    console.log(`📊 CORS Proxy response for ${seriesId}:`, data.observations?.length || 0, 'observations');
-                    return data;
-                },
-                
                 // Approach 3: Try without proxy (might work in some environments)
                 async () => {
                     const fredUrl = `https://api.stlouisfed.org/fred/series/observations?series_id=${seriesId}&api_key=${FRED_API_KEY}&file_type=json&limit=300&sort_order=desc`;
@@ -630,35 +610,24 @@ <h2 class="text-base font-medium mb-2 text-slate-900 dark:text-white">Treasury A
 
             const apis = [
                 {
-                    name: 'CoinGecko',
-                    fetch: async () => {
-                        const response = await fetch('https://api.coingecko.com/api/v3/coins/bitcoin/market_chart?vs_currency=usd&days=180&interval=daily');
-                        const data = await response.json();
-                        return data.prices.map(([timestamp, price]) => ({
-                            date: new Date(timestamp).toISOString().split('T')[0],
-                            value: price
-                        }));
-                    }
-                },
-                {
-                    name: 'CoinCap',
+                    name: 'Binance',
                     fetch: async () => {
-                        const response = await fetch('https://api.coincap.io/v2/assets/bitcoin/history?interval=d1&start=' + (Date.now() - 180 * 24 * 60 * 60 * 1000));
+                        const response = await fetch('https://api.binance.com/api/v3/klines?symbol=BTCUSDT&interval=1d&limit=120');
                         const data = await response.json();
-                        return data.data.map(item => ({
-                            date: new Date(item.time).toISOString().split('T')[0],
-                            value: parseFloat(item.priceUsd)
+                        return data.map(item => ({
+                            date: new Date(item[0]).toISOString().split('T')[0],
+                            value: parseFloat(item[4]) // Close price
                         }));
                     }
                 },
                 {
-                    name: 'Binance',
+                    name: 'CoinGecko',
                     fetch: async () => {
-                        const response = await fetch('https://api.binance.com/api/v3/klines?symbol=BTCUSDT&interval=1d&limit=180');
+                        const response = await fetch('https://api.coingecko.com/api/v3/coins/bitcoin/market_chart?vs_currency=usd&days=120&interval=daily');
                         const data = await response.json();
-                        return data.map(item => ({
-                            date: new Date(item[0]).toISOString().split('T')[0],
-                            value: parseFloat(item[4]) // Close price
+                        return data.prices.map(([timestamp, price]) => ({
+                            date: new Date(timestamp).toISOString().split('T')[0],
+                            value: price
                         }));
                     }
                 }
@@ -1353,7 +1322,7 @@ <h2 class="text-base font-medium mb-2 text-slate-900 dark:text-white">Treasury A
 
                         const data = await loadDataWithRetry(chartId, () => {
                             const timeoutPromise = new Promise((_, reject) => 
-                                setTimeout(() => reject(new Error('Timeout')), 5000)
+                                setTimeout(() => reject(new Error('Timeout')), 3000)
                             );
                             const dataPromise = fetchFRED(series.id);
                             return Promise.race([dataPromise, timeoutPromise]);
@@ -1368,10 +1337,38 @@ <h2 class="text-base font-medium mb-2 text-slate-900 dark:text-white">Treasury A
                     }
                 });
 
-                // Wait for both Bitcoin and FRED data in parallel
+                // Wait for both Bitcoin and FRED data in parallel with progress updates
+                let completedCount = 0;
+                const totalCount = 6; // 1 Bitcoin + 5 FRED series
+                
+                // Update progress as each API completes
+                const updateProgress = () => {
+                    completedCount++;
+                    const percentage = Math.round((completedCount / totalCount) * 100);
+                    statusEl.innerHTML = `
+                        <div class="flex items-center space-x-2">
+                            <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600"></div>
+                            <p class="${isDark ? 'text-blue-300' : 'text-blue-700'}">⚡ Loading data... ${percentage}% (${completedCount}/${totalCount})</p>
+                        </div>
+                    `;
+                };
+                
+                // Add progress tracking to promises
+                const bitcoinWithProgress = bitcoinPromise.then(result => {
+                    updateProgress();
+                    return result;
+                });
+                
+                const fredWithProgress = fredPromises.map(promise => 
+                    promise.then(result => {
+                        updateProgress();
+                        return result;
+                    })
+                );
+                
                 const [bitcoinResult, fredResults] = await Promise.all([
-                    bitcoinPromise,
-                    Promise.all(fredPromises)
+                    bitcoinWithProgress,
+                    Promise.all(fredWithProgress)
                 ]);
 
                 fredResults.forEach(result => {