Upload templates/dashboard.html with huggingface_hub

templates/dashboard.html

@@ -351,31 +351,45 @@
         </div>
 
         <div class="content">
-            <div id="loading" class="loading">
-                <div class="spinner"></div>
-                <p>Loading provider data...</p>
-            </div>
-
             <div id="error" class="error" style="display: none;">
                 <strong>Error:</strong> <span id="errorMessage"></span>
             </div>
 
-            <div id="content" style="display: none;">
+            <div id="content">
                 <div class="stats-row" id="statsRow">
-                    <!-- Stats cards will be populated here -->
+                    <div class="stat-card">
+                        <div class="spinner" style="width: 20px; height: 20px; border-width: 2px; margin: 0 auto 5px;"></div>
+                        <p>Loading...</p>
+                    </div>
+                    <div class="stat-card">
+                        <div class="spinner" style="width: 20px; height: 20px; border-width: 2px; margin: 0 auto 5px;"></div>
+                        <p>Loading...</p>
+                    </div>
+                    <div class="stat-card">
+                        <div class="spinner" style="width: 20px; height: 20px; border-width: 2px; margin: 0 auto 5px;"></div>
+                        <p>Loading...</p>
+                    </div>
                 </div>
 
                 <div class="chart-container">
                     <h2>Live Comparison of Monthly Requests by Provider</h2>
-                    <div class="chart-wrapper">
-                        <canvas id="requestsChart"></canvas>
+                    <div class="chart-wrapper" id="requestsChartWrapper">
+                        <div class="loading" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 350px;">
+                            <div class="spinner" style="margin-bottom: 15px;"></div>
+                            <p style="color: #6c757d;">Loading chart data...</p>
+                        </div>
+                        <canvas id="requestsChart" style="display: none;"></canvas>
                     </div>
                 </div>
 
                 <div class="chart-container">
                     <h2 id="historicalChartTitle">Historical Trends</h2>
-                    <div class="chart-wrapper">
-                        <canvas id="historicalChart"></canvas>
+                    <div class="chart-wrapper" id="historicalChartWrapper">
+                        <div class="loading" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 350px;">
+                            <div class="spinner" style="margin-bottom: 15px;"></div>
+                            <p style="color: #6c757d;">Loading historical data...</p>
+                        </div>
+                        <canvas id="historicalChart" style="display: none;"></canvas>
                     </div>
                     <div class="chart-instructions">
                         Hover for detailed coordinates • Click legend items to show/hide providers
@@ -384,7 +398,11 @@
 
                 <div class="table-container">
                     <h2>Provider Details</h2>
-                    <table id="providersTable">
+                    <div id="providersTableLoading" class="loading" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px;">
+                        <div class="spinner" style="margin-bottom: 15px;"></div>
+                        <p style="color: #6c757d;">Loading provider data...</p>
+                    </div>
+                    <table id="providersTable" style="display: none;">
                         <thead>
                             <tr>
                                 <th>Provider</th>
@@ -400,11 +418,11 @@
 
                 <div class="table-container">
                     <h2>Model Support Matrix</h2>
-                    <div id="modelsLoading" class="loading" style="display: none;">
-                        <div class="spinner"></div>
-                        <p>Loading models data...</p>
+                    <div id="modelsLoading" class="loading" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px;">
+                        <div class="spinner" style="margin-bottom: 15px;"></div>
+                        <p style="color: #6c757d;">Loading models data...</p>
                     </div>
-                    <div style="overflow-x: auto;">
+                    <div id="modelsTableContainer" style="overflow-x: auto; display: none;">
                         <table id="modelsTable" style="width: 100%; table-layout: fixed;">
                             <thead>
                                 <tr id="modelsTableHeader">
@@ -474,8 +492,6 @@
         }
 
         function showError(message) {
-            document.getElementById('loading').style.display = 'none';
-            document.getElementById('content').style.display = 'none';
             document.getElementById('error').style.display = 'block';
             document.getElementById('errorMessage').textContent = message;
         }
@@ -494,27 +510,35 @@
             const totalRequests = data.providers.reduce((sum, provider) => sum + provider.monthly_requests_int, 0);
             const topProvider = data.providers[0];
 
-            // Use requestAnimationFrame for smooth DOM updates
-            requestAnimationFrame(() => {
-                statsRow.innerHTML = `
-                    <div class="stat-card">
-                        <h3>${data.total_providers}</h3>
-                        <p>Total Providers</p>
-                    </div>
-                    <div class="stat-card">
-                        <h3>${formatNumber(totalRequests)}</h3>
-                        <p>Total Monthly Requests</p>
-                    </div>
-                    <div class="stat-card">
-                        <h3>${topProvider.provider}</h3>
-                        <p>Top Provider</p>
-                    </div>
-                `;
-            });
+            // Update immediately without blocking
+            statsRow.innerHTML = `
+                <div class="stat-card">
+                    <h3>${data.total_providers}</h3>
+                    <p>Total Providers</p>
+                </div>
+                <div class="stat-card">
+                    <h3>${formatNumber(totalRequests)}</h3>
+                    <p>Total Monthly Requests</p>
+                </div>
+                <div class="stat-card">
+                    <h3>${topProvider.provider}</h3>
+                    <p>Top Provider</p>
+                </div>
+            `;
         }
 
         function updateChart(data) {
-            const ctx = document.getElementById('requestsChart').getContext('2d');
+            const wrapper = document.getElementById('requestsChartWrapper');
+            const canvas = document.getElementById('requestsChart');
+            const loadingEl = wrapper.querySelector('.loading');
+            
+            // Hide loading, show canvas
+            if (loadingEl) {
+                loadingEl.style.display = 'none';
+            }
+            canvas.style.display = 'block';
+            
+            const ctx = canvas.getContext('2d');
             
             if (chart) {
                 chart.destroy();
@@ -602,7 +626,17 @@
         }
 
         function updateHistoricalChart(historicalData) {
-            const ctx = document.getElementById('historicalChart').getContext('2d');
+            const wrapper = document.getElementById('historicalChartWrapper');
+            const canvas = document.getElementById('historicalChart');
+            const loadingEl = wrapper.querySelector('.loading');
+            
+            // Hide loading, show canvas
+            if (loadingEl) {
+                loadingEl.style.display = 'none';
+            }
+            canvas.style.display = 'block';
+            
+            const ctx = canvas.getContext('2d');
             
             if (historicalChart) {
                 historicalChart.destroy();
@@ -803,6 +837,15 @@
 
         function updateTable(data) {
             const tableBody = document.getElementById('tableBody');
+            const table = document.getElementById('providersTable');
+            const loadingEl = document.getElementById('providersTableLoading');
+            
+            // Hide loading, show table
+            if (loadingEl) {
+                loadingEl.style.display = 'none';
+            }
+            table.style.display = 'table';
+            
             const rows = data.providers.map(provider => `
                 <tr>
                     <td><strong>${provider.provider}</strong></td>
@@ -811,10 +854,7 @@
                 </tr>
             `).join('');
 
-            // Use requestAnimationFrame for smooth DOM updates
-            requestAnimationFrame(() => {
-                tableBody.innerHTML = rows;
-            });
+            tableBody.innerHTML = rows;
         }
 
         function updateModelsTable(modelsData) {
@@ -822,6 +862,15 @@
             const modelsTableHeader = document.getElementById('modelsTableHeader');
             const modelsTableFoot = document.getElementById('modelsTableFoot');
             const modelsLoading = document.getElementById('modelsLoading');
+            const modelsTableContainer = document.getElementById('modelsTableContainer');
+            
+            // Hide loading, show table
+            if (modelsLoading) {
+                modelsLoading.style.display = 'none';
+            }
+            if (modelsTableContainer) {
+                modelsTableContainer.style.display = 'block';
+            }
             
             if (modelsData.error) {
                 const errorRow = `
@@ -833,11 +882,8 @@
                         </td>
                     </tr>
                 `;
-                requestAnimationFrame(() => {
-                    modelsLoading.style.display = 'none';
-                    modelsTableBody.innerHTML = errorRow;
-                    modelsTableFoot.innerHTML = '';
-                });
+                modelsTableBody.innerHTML = errorRow;
+                modelsTableFoot.innerHTML = '';
                 return;
             }
 
@@ -918,50 +964,59 @@
                 })
                 .join('<br>');
 
-            // Use requestAnimationFrame for smooth DOM updates
-            requestAnimationFrame(() => {
-                modelsLoading.style.display = 'none';
-                modelsTableHeader.innerHTML = headerHtml;
-                modelsTableBody.innerHTML = matrixRows;
-                modelsTableFoot.innerHTML = footerHtml;
-                if (providerLinksDiv) {
-                    providerLinksDiv.innerHTML = providerLinksHtml;
-                }
-            });
+            // Update immediately
+            modelsTableHeader.innerHTML = headerHtml;
+            modelsTableBody.innerHTML = matrixRows;
+            modelsTableFoot.innerHTML = footerHtml;
+            if (providerLinksDiv) {
+                providerLinksDiv.innerHTML = providerLinksHtml;
+            }
         }
 
         async function loadData() {
-            try {
-                const loadingEl = document.getElementById('loading');
-                const contentEl = document.getElementById('content');
-                const errorEl = document.getElementById('error');
-                const modelsLoading = document.getElementById('modelsLoading');
+            const errorEl = document.getElementById('error');
+            errorEl.style.display = 'none';
+
+            // Load provider data first (most important, fastest)
+            loadProviderData().catch(error => {
+                console.error('Error loading provider data:', error);
+                showError('Failed to load provider data. Please try again.');
+            });
+
+            // Load historical data second (can be slower)
+            loadHistoricalData().catch(error => {
+                console.error('Error loading historical data:', error);
+                // Don't show error for historical data, just log it
+            });
 
-                loadingEl.style.display = 'block';
-                contentEl.style.display = 'none';
-                errorEl.style.display = 'none';
-                modelsLoading.style.display = 'block';
-
-                // Fetch current data, historical data, and models data
-                const [data, historicalData, modelsData] = await Promise.all([
-                    fetchProviderData(),
-                    fetchHistoricalData(),
-                    fetchModelsData()
-                ]);
+            // Load models data last (heaviest)
+            loadModelsData().catch(error => {
+                console.error('Error loading models data:', error);
+                // Don't show error for models data, just log it
+            });
+        }
+
+        async function loadProviderData() {
+            try {
+                const data = await fetchProviderData();
                 
-                // Batch DOM updates using requestAnimationFrame
-                requestAnimationFrame(() => {
-                    loadingEl.style.display = 'none';
-                    contentEl.style.display = 'block';
-                    document.getElementById('lastUpdated').textContent = `Last updated: ${data.last_updated}`;
-                });
-
-                // Update components
+                // Update last updated timestamp
+                document.getElementById('lastUpdated').textContent = `Last updated: ${data.last_updated}`;
+
+                // Update components immediately as data arrives
                 updateStats(data);
                 updateChart(data);
                 updateTable(data);
+            } catch (error) {
+                console.error('Error in loadProviderData:', error);
+                throw error;
+            }
+        }
+
+        async function loadHistoricalData() {
+            try {
+                const historicalData = await fetchHistoricalData();
                 updateHistoricalChart(historicalData);
-                updateModelsTable(modelsData);
 
                 // Update historical chart title with date range
                 const titleElement = document.getElementById('historicalChartTitle');
@@ -970,9 +1025,23 @@
                 } else {
                     titleElement.textContent = 'Historical Trends';
                 }
+            } catch (error) {
+                console.error('Error in loadHistoricalData:', error);
+                // Show a message in the chart area if it fails
+                const wrapper = document.getElementById('historicalChartWrapper');
+                wrapper.innerHTML = '<div class="loading" style="padding: 20px; color: #6c757d; text-align: center;">Historical data temporarily unavailable</div>';
+            }
+        }
 
+        async function loadModelsData() {
+            try {
+                const modelsData = await fetchModelsData();
+                updateModelsTable(modelsData);
             } catch (error) {
-                showError('Failed to load provider data. Please try again.');
+                console.error('Error in loadModelsData:', error);
+                // Show a message in the models area if it fails
+                const modelsLoading = document.getElementById('modelsLoading');
+                modelsLoading.innerHTML = '<div style="padding: 20px; color: #6c757d; text-align: center;">Models data temporarily unavailable</div>';
             }
         }
 
@@ -982,13 +1051,87 @@
             refreshBtn.textContent = 'Refreshing...';
             
             try {
+                // Reset loading states
+                resetLoadingStates();
+                
+                // Load all data progressively
                 await loadData();
             } finally {
                 // Small delay to prevent rapid clicking
                 setTimeout(() => {
                     refreshBtn.disabled = false;
                     refreshBtn.textContent = 'Refresh Data';
-                }, 100);
+                }, 500);
+            }
+        }
+
+        function resetLoadingStates() {
+            // Reset stats
+            const statsRow = document.getElementById('statsRow');
+            statsRow.innerHTML = `
+                <div class="stat-card">
+                    <div class="spinner" style="width: 20px; height: 20px; border-width: 2px; margin: 0 auto 5px;"></div>
+                    <p>Loading...</p>
+                </div>
+                <div class="stat-card">
+                    <div class="spinner" style="width: 20px; height: 20px; border-width: 2px; margin: 0 auto 5px;"></div>
+                    <p>Loading...</p>
+                </div>
+                <div class="stat-card">
+                    <div class="spinner" style="width: 20px; height: 20px; border-width: 2px; margin: 0 auto 5px;"></div>
+                    <p>Loading...</p>
+                </div>
+            `;
+            
+            // Reset charts
+            const requestsChartWrapper = document.getElementById('requestsChartWrapper');
+            const requestsChart = document.getElementById('requestsChart');
+            requestsChartWrapper.innerHTML = `
+                <div class="loading" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 350px;">
+                    <div class="spinner" style="margin-bottom: 15px;"></div>
+                    <p style="color: #6c757d;">Loading chart data...</p>
+                </div>
+            `;
+            requestsChart.style.display = 'none';
+            if (chart) {
+                chart.destroy();
+                chart = null;
+            }
+            
+            const historicalChartWrapper = document.getElementById('historicalChartWrapper');
+            const historicalChart = document.getElementById('historicalChart');
+            historicalChartWrapper.innerHTML = `
+                <div class="loading" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 350px;">
+                    <div class="spinner" style="margin-bottom: 15px;"></div>
+                    <p style="color: #6c757d;">Loading historical data...</p>
+                </div>
+            `;
+            historicalChart.style.display = 'none';
+            if (historicalChart) {
+                historicalChart.destroy();
+                historicalChart = null;
+            }
+            
+            // Reset table
+            const providersTable = document.getElementById('providersTable');
+            const providersTableLoading = document.getElementById('providersTableLoading');
+            providersTable.style.display = 'none';
+            providersTableLoading.style.display = 'flex';
+            providersTableLoading.innerHTML = `
+                <div class="spinner" style="margin-bottom: 15px;"></div>
+                <p style="color: #6c757d;">Loading provider data...</p>
+            `;
+            
+            // Reset models table
+            const modelsLoading = document.getElementById('modelsLoading');
+            const modelsTableContainer = document.getElementById('modelsTableContainer');
+            modelsLoading.style.display = 'flex';
+            modelsLoading.innerHTML = `
+                <div class="spinner" style="margin-bottom: 15px;"></div>
+                <p style="color: #6c757d;">Loading models data...</p>
+            `;
+            if (modelsTableContainer) {
+                modelsTableContainer.style.display = 'none';
             }
         }