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

apps/marketplace-web/src/main.ts

@@ -63,6 +63,7 @@ app.innerHTML = `
         <span>Open bids awaiting match</span>
       </article>
     </section>
+    <section id="stats-grid">
 
     <section class="panels">
       <article class="panel" id="offers-panel">
@@ -104,6 +105,7 @@ const selectors = {
   openCapacity: document.querySelector<HTMLSpanElement>('#stat-open-capacity')!,
   averagePrice: document.querySelector<HTMLSpanElement>('#stat-average-price')!,
   activeBids: document.querySelector<HTMLSpanElement>('#stat-active-bids')!,
+  statsWrapper: document.querySelector<HTMLDivElement>('#stats-grid')!,
   offersWrapper: document.querySelector<HTMLDivElement>('#offers-table-wrapper')!,
   bidForm: document.querySelector<HTMLFormElement>('#bid-form')!,
   toast: document.querySelector<HTMLDivElement>('#toast')!,
@@ -201,6 +203,9 @@ function showToast(message: string, duration = 2500): void {
 }
 
 async function loadDashboard(): Promise<void> {
+  // Show skeleton loading states
+  showSkeletons();
+  
   try {
     const [stats, offers] = await Promise.all([
       fetchMarketplaceStats(),
@@ -219,6 +224,31 @@ async function loadDashboard(): Promise<void> {
   }
 }
 
+function showSkeletons() {
+  const statsWrapper = selectors.statsWrapper;
+  const offersWrapper = selectors.offersWrapper;
+  
+  if (statsWrapper) {
+    statsWrapper.innerHTML = `
+      <div class="skeleton-grid">
+        ${Array(4).fill('').map(() => `
+          <div class="skeleton skeleton-card"></div>
+        `).join('')}
+      </div>
+    `;
+  }
+  
+  if (offersWrapper) {
+    offersWrapper.innerHTML = `
+      <div class="skeleton-list">
+        ${Array(6).fill('').map(() => `
+          <div class="skeleton skeleton-card"></div>
+        `).join('')}
+      </div>
+    `;
+  }
+}
+
 selectors.bidForm?.addEventListener('submit', async (event) => {
   event.preventDefault();
 

apps/marketplace-web/src/style.css

@@ -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;