+ ${Array(4).fill('').map(() => `
+
+ `).join('')}
+
+ `;
+ }
+
+ if (offersWrapper) {
+ offersWrapper.innerHTML = `
+
+ ${Array(6).fill('').map(() => `
+
+ `).join('')}
+
+ `;
+ }
+}
+
selectors.bidForm?.addEventListener('submit', async (event) => {
event.preventDefault();
diff --git a/apps/marketplace-web/src/style.css b/apps/marketplace-web/src/style.css
index 9b548835..2fbbadc5 100644
--- a/apps/marketplace-web/src/style.css
+++ b/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;
diff --git a/apps/trade-exchange/index.html b/apps/trade-exchange/index.html
index 1b2937a9..4de7a7af 100644
--- a/apps/trade-exchange/index.html
+++ b/apps/trade-exchange/index.html
@@ -8,8 +8,9 @@
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-