fix: remove skeleton shimmer from dashboard stat cards
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
@@ -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
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user