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
2
website/assets/js/axios.min.js
vendored
Normal file
2
website/assets/js/axios.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
118
website/assets/js/global-header.js
Normal file
118
website/assets/js/global-header.js
Normal file
@@ -0,0 +1,118 @@
|
||||
(function () {
|
||||
const NAV_ITEMS = [
|
||||
{ key: 'home', label: 'Home', href: '/' },
|
||||
{ key: 'explorer', label: 'Explorer', href: '/explorer/' },
|
||||
{ key: 'marketplace', label: 'Marketplace', href: '/marketplace/' },
|
||||
{ key: 'exchange', label: 'Exchange', href: '/Exchange/' },
|
||||
{ key: 'docs', label: 'Docs', href: '/docs/index.html' },
|
||||
];
|
||||
|
||||
const CTA = { label: 'Launch Marketplace', href: '/marketplace/' };
|
||||
|
||||
function determineActiveKey(pathname) {
|
||||
if (pathname.startsWith('/explorer')) return 'explorer';
|
||||
if (pathname.startsWith('/marketplace')) return 'marketplace';
|
||||
if (pathname.toLowerCase().startsWith('/exchange')) return 'exchange';
|
||||
if (pathname.startsWith('/docs')) return 'docs';
|
||||
return 'home';
|
||||
}
|
||||
|
||||
function buildHeader(activeKey) {
|
||||
const navLinks = NAV_ITEMS.map((item) => {
|
||||
const active = item.key === activeKey ? 'active' : '';
|
||||
return `<a href="${item.href}" class="global-nav__link ${active}">${item.label}</a>`;
|
||||
}).join('');
|
||||
|
||||
return `
|
||||
<header class="global-header">
|
||||
<div class="global-header__inner">
|
||||
<a class="global-brand" href="/">
|
||||
<div class="global-brand__icon">
|
||||
<i class="fas fa-cube"></i>
|
||||
</div>
|
||||
<div class="global-brand__text">
|
||||
<span>AITBC Platform</span>
|
||||
<small>AI Blockchain Network</small>
|
||||
</div>
|
||||
</a>
|
||||
<nav class="global-nav">${navLinks}</nav>
|
||||
<div class="global-header__actions">
|
||||
<button type="button" class="global-dark-toggle" data-role="global-theme-toggle">
|
||||
<span class="global-dark-toggle__emoji">🌙</span>
|
||||
<span class="global-dark-toggle__text">Dark</span>
|
||||
</button>
|
||||
<a href="${CTA.href}" class="global-nav__cta">${CTA.label}</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
`;
|
||||
}
|
||||
|
||||
function getCurrentTheme() {
|
||||
if (document.documentElement.hasAttribute('data-theme')) {
|
||||
return document.documentElement.getAttribute('data-theme');
|
||||
}
|
||||
if (document.documentElement.classList.contains('dark')) return 'dark';
|
||||
if (document.body && document.body.classList.contains('light')) return 'light';
|
||||
return 'light';
|
||||
}
|
||||
|
||||
function updateToggleLabel(theme) {
|
||||
const emojiEl = document.querySelector('.global-dark-toggle__emoji');
|
||||
const textEl = document.querySelector('.global-dark-toggle__text');
|
||||
if (!emojiEl || !textEl) return;
|
||||
if (theme === 'dark') {
|
||||
emojiEl.textContent = '🌙';
|
||||
textEl.textContent = 'Dark';
|
||||
} else {
|
||||
emojiEl.textContent = '☀️';
|
||||
textEl.textContent = 'Light';
|
||||
}
|
||||
}
|
||||
|
||||
function bindThemeToggle() {
|
||||
const toggle = document.querySelector('[data-role="global-theme-toggle"]');
|
||||
if (!toggle) return;
|
||||
|
||||
toggle.addEventListener('click', () => {
|
||||
if (typeof window.toggleDarkMode === 'function') {
|
||||
window.toggleDarkMode();
|
||||
} else if (typeof window.toggleTheme === 'function') {
|
||||
window.toggleTheme();
|
||||
} else {
|
||||
const isDark = document.documentElement.classList.toggle('dark');
|
||||
if (isDark) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => updateToggleLabel(getCurrentTheme()), 0);
|
||||
});
|
||||
|
||||
updateToggleLabel(getCurrentTheme());
|
||||
}
|
||||
|
||||
function initHeader() {
|
||||
const activeKey = determineActiveKey(window.location.pathname);
|
||||
const headerHTML = buildHeader(activeKey);
|
||||
|
||||
const placeholder = document.querySelector('[data-global-header]');
|
||||
const existing = placeholder || document.querySelector('.global-header');
|
||||
|
||||
if (existing) {
|
||||
existing.outerHTML = headerHTML;
|
||||
} else {
|
||||
document.body.insertAdjacentHTML('afterbegin', headerHTML);
|
||||
}
|
||||
|
||||
bindThemeToggle();
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initHeader);
|
||||
} else {
|
||||
initHeader();
|
||||
}
|
||||
})();
|
||||
18843
website/assets/js/lucide.js
Normal file
18843
website/assets/js/lucide.js
Normal file
File diff suppressed because it is too large
Load Diff
139
website/assets/js/skeleton.js
Normal file
139
website/assets/js/skeleton.js
Normal file
@@ -0,0 +1,139 @@
|
||||
/**
|
||||
* Skeleton Loading States for AITBC Website
|
||||
* Provides loading placeholders while content is being fetched
|
||||
*/
|
||||
|
||||
class SkeletonLoader {
|
||||
constructor() {
|
||||
this.skeletonStyles = `
|
||||
.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-text {
|
||||
height: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.skeleton-text.title {
|
||||
height: 2rem;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.skeleton-text.subtitle {
|
||||
height: 1.2rem;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.skeleton-card {
|
||||
height: 120px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.skeleton-button {
|
||||
height: 2.5rem;
|
||||
width: 120px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.dark .skeleton {
|
||||
background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
|
||||
background-size: 200% 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Inject skeleton styles
|
||||
if (!document.getElementById('skeleton-styles')) {
|
||||
const style = document.createElement('style');
|
||||
style.id = 'skeleton-styles';
|
||||
style.textContent = this.skeletonStyles;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
}
|
||||
|
||||
// Create skeleton element
|
||||
createSkeleton(type = 'text', customClass = '') {
|
||||
const skeleton = document.createElement('div');
|
||||
skeleton.className = `skeleton skeleton-${type} ${customClass}`;
|
||||
return skeleton;
|
||||
}
|
||||
|
||||
// Show skeleton for a container
|
||||
showSkeleton(container, config = {}) {
|
||||
const {
|
||||
type = 'text',
|
||||
count = 3,
|
||||
customClass = ''
|
||||
} = config;
|
||||
|
||||
// Store original content
|
||||
const originalContent = container.innerHTML;
|
||||
container.dataset.originalContent = originalContent;
|
||||
|
||||
// Clear and add skeletons
|
||||
container.innerHTML = '';
|
||||
for (let i = 0; i < count; i++) {
|
||||
container.appendChild(this.createSkeleton(type, customClass));
|
||||
}
|
||||
}
|
||||
|
||||
// Hide skeleton and restore content
|
||||
hideSkeleton(container, content = null) {
|
||||
if (content) {
|
||||
container.innerHTML = content;
|
||||
} else if (container.dataset.originalContent) {
|
||||
container.innerHTML = container.dataset.originalContent;
|
||||
delete container.dataset.originalContent;
|
||||
}
|
||||
}
|
||||
|
||||
// Marketplace specific skeletons
|
||||
showMarketplaceSkeletons() {
|
||||
const statsContainer = document.querySelector('#stats-container');
|
||||
const offersContainer = document.querySelector('#offers-container');
|
||||
|
||||
if (statsContainer) {
|
||||
this.showSkeleton(statsContainer, {
|
||||
type: 'card',
|
||||
count: 4,
|
||||
customClass: 'stats-skeleton'
|
||||
});
|
||||
}
|
||||
|
||||
if (offersContainer) {
|
||||
this.showSkeleton(offersContainer, {
|
||||
type: 'card',
|
||||
count: 6,
|
||||
customClass: 'offer-skeleton'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize skeleton loader
|
||||
window.skeletonLoader = new SkeletonLoader();
|
||||
|
||||
// Auto-hide skeletons when content is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Hide skeletons after a timeout as fallback
|
||||
setTimeout(() => {
|
||||
document.querySelectorAll('.skeleton').forEach(skeleton => {
|
||||
const container = skeleton.parentElement;
|
||||
if (container && container.dataset.originalContent) {
|
||||
window.skeletonLoader.hideSkeleton(container);
|
||||
}
|
||||
});
|
||||
}, 5000);
|
||||
});
|
||||
@@ -5,12 +5,16 @@
|
||||
'use strict';
|
||||
|
||||
function sendToAnalytics(metric) {
|
||||
const safeEntries = Array.isArray(metric.entries) ? metric.entries : [];
|
||||
const safeValue = Number.isFinite(metric.value) ? Math.round(metric.value) : 0;
|
||||
const safeDelta = Number.isFinite(metric.delta) ? Math.round(metric.delta) : 0;
|
||||
|
||||
const data = {
|
||||
name: metric.name,
|
||||
value: Math.round(metric.value),
|
||||
id: metric.id,
|
||||
delta: Math.round(metric.delta),
|
||||
entries: metric.entries.map(e => ({
|
||||
value: safeValue,
|
||||
id: metric.id || 'unknown',
|
||||
delta: safeDelta,
|
||||
entries: safeEntries.map(e => ({
|
||||
name: e.name,
|
||||
startTime: e.startTime,
|
||||
duration: e.duration
|
||||
@@ -19,9 +23,27 @@
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
const payload = JSON.stringify(data);
|
||||
|
||||
// Send to analytics endpoint
|
||||
if (navigator.sendBeacon) {
|
||||
navigator.sendBeacon('/api/web-vitals', JSON.stringify(data));
|
||||
const blob = new Blob([payload], { type: 'application/json' });
|
||||
const ok = navigator.sendBeacon('/api/web-vitals', blob);
|
||||
if (!ok) {
|
||||
fetch('/api/web-vitals', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: payload,
|
||||
keepalive: true
|
||||
}).catch(() => {});
|
||||
}
|
||||
} else {
|
||||
fetch('/api/web-vitals', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: payload,
|
||||
keepalive: true
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
// Also log to console in development
|
||||
|
||||
Reference in New Issue
Block a user