feat: add skeleton loaders to marketplace and integrate global header across docs

Marketplace:
- Add skeleton loading states for stats grid and GPU offer cards
- Show animated skeleton placeholders during data fetch
- Add skeleton CSS with shimmer animation and dark mode support
- Wrap stats section in #stats-grid container for skeleton injection

Trade Exchange:
- Replace inline header with data-global-header component
- Switch GPU offers to production API (/api/miners/list)
- Add fallback to demo
This commit is contained in:
oib
2026-02-15 20:44:04 +01:00
parent 7062b2cc78
commit fdc3012780
29 changed files with 19780 additions and 388 deletions

View File

@@ -8,6 +8,42 @@
-moz-osx-font-smoothing: grayscale;
}
/* Skeleton loading styles */
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 4px;
}
@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton-card {
height: 120px;
margin-bottom: 1rem;
}
.skeleton-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.skeleton-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.dark .skeleton {
background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
background-size: 200% 100;
}
/* Dark mode variables */
.dark {
--bg-primary: #1f2937;