fix: remove skeleton shimmer from dashboard stat cards

This commit is contained in:
dadaloop82
2026-05-06 05:15:44 +00:00
parent 521d8f8e47
commit af9bae3093
3 changed files with 4 additions and 27 deletions
-15
View File
@@ -498,21 +498,6 @@ body {
color: var(--primary); color: var(--primary);
} }
/* Skeleton pulse while stat is loading */
.stat-value.stat-loading {
color: transparent;
background: linear-gradient(90deg, var(--border) 25%, var(--bg-dark, #e2e8f0) 50%, var(--border) 75%);
background-size: 200% 100%;
animation: stat-shimmer 1.2s infinite;
border-radius: 6px;
min-width: 2rem;
display: inline-block;
}
@keyframes stat-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.stat-label { .stat-label {
font-size: 0.85rem; font-size: 0.85rem;
color: var(--text-light); color: var(--text-light);
-8
View File
@@ -2339,11 +2339,6 @@ function showPage(pageId, param = null) {
// Page-specific init // Page-specific init
switch(pageId) { switch(pageId) {
case 'dashboard': case 'dashboard':
// Show skeleton on stat-cards while data loads
['dispensa', 'frigo', 'freezer', 'spesa'].forEach(loc => {
const el = document.getElementById(`stat-${loc}`);
if (el) { el.textContent = '…'; el.classList.add('stat-loading'); }
});
loadDashboard(); loadDashboard();
break; break;
case 'inventory': case 'inventory':
@@ -2763,7 +2758,6 @@ async function loadDashboard() {
const count = s ? s.product_count : 0; const count = s ? s.product_count : 0;
const el = document.getElementById(`stat-${loc}`); const el = document.getElementById(`stat-${loc}`);
el.textContent = count; el.textContent = count;
el.classList.remove('stat-loading');
total += count; total += count;
}); });
// Add non-standard locations // Add non-standard locations
@@ -8694,11 +8688,9 @@ async function loadShoppingCount() {
} else { } else {
el.textContent = '-'; el.textContent = '-';
} }
el.classList.remove('stat-loading');
} catch { } catch {
const el = document.getElementById('stat-spesa'); const el = document.getElementById('stat-spesa');
el.textContent = '-'; el.textContent = '-';
el.classList.remove('stat-loading');
} }
// Smart urgency badge: use cached data if fresh (< 2 min), else fetch // Smart urgency badge: use cached data if fresh (< 2 min), else fetch
if (smartShoppingItems.length > 0 && (Date.now() - _smartShoppingLastFetch) < 2 * 60 * 1000) { if (smartShoppingItems.length > 0 && (Date.now() - _smartShoppingLastFetch) < 2 * 60 * 1000) {
+4 -4
View File
@@ -102,22 +102,22 @@
<div class="dashboard-stats" id="dashboard-stats"> <div class="dashboard-stats" id="dashboard-stats">
<div class="stat-card" onclick="showPage('inventory', 'dispensa')"> <div class="stat-card" onclick="showPage('inventory', 'dispensa')">
<span class="stat-icon">🗄️</span> <span class="stat-icon">🗄️</span>
<span class="stat-value stat-loading" id="stat-dispensa"></span> <span class="stat-value" id="stat-dispensa">-</span>
<span class="stat-label" data-i18n="locations.dispensa">Dispensa</span> <span class="stat-label" data-i18n="locations.dispensa">Dispensa</span>
</div> </div>
<div class="stat-card" onclick="showPage('inventory', 'frigo')"> <div class="stat-card" onclick="showPage('inventory', 'frigo')">
<span class="stat-icon">🧊</span> <span class="stat-icon">🧊</span>
<span class="stat-value stat-loading" id="stat-frigo"></span> <span class="stat-value" id="stat-frigo">-</span>
<span class="stat-label" data-i18n="locations.frigo">Frigo</span> <span class="stat-label" data-i18n="locations.frigo">Frigo</span>
</div> </div>
<div class="stat-card" onclick="showPage('inventory', 'freezer')"> <div class="stat-card" onclick="showPage('inventory', 'freezer')">
<span class="stat-icon">❄️</span> <span class="stat-icon">❄️</span>
<span class="stat-value stat-loading" id="stat-freezer"></span> <span class="stat-value" id="stat-freezer">-</span>
<span class="stat-label" data-i18n="locations.freezer">Freezer</span> <span class="stat-label" data-i18n="locations.freezer">Freezer</span>
</div> </div>
<div class="stat-card" onclick="showPage('shopping')"> <div class="stat-card" onclick="showPage('shopping')">
<span class="stat-icon">🛒</span> <span class="stat-icon">🛒</span>
<span class="stat-value stat-loading" id="stat-spesa"></span> <span class="stat-value" id="stat-spesa">-</span>
<span class="stat-label" data-i18n="nav.shopping">Spesa</span> <span class="stat-label" data-i18n="nav.shopping">Spesa</span>
<span class="stat-urgent" id="stat-urgent" style="display:none"></span> <span class="stat-urgent" id="stat-urgent" style="display:none"></span>
</div> </div>