jianf/ModelRouter
1
0
Fork 0
mirror of https://gitcode.com/JianFeeeee/ModelRouter.git synced 2026-09-20 00:48:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): loading skeleton for the KPI row so first paint isn't a sudden blank->cards pop

Browse Source 
The five KPI cards are built only after /api/stats returns; before that #kpi-row was empty, so the top of the dashboard appeared blank then jumped in. Now the row starts with a shimmer skeleton (5 placeholder cards with a CSS gradient animation) that paintStats replaces with the real cards on first data. Deployed (bak .bak.20260811u), server active.
This commit is contained in:
root
2026-08-11 17:50:23 +08:00
parent a83abee378
commit 12c61317fb
1 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
internal/gateway/ui/index.html
View File

@ -101,6 +101,11 @@ pre.configbox { background:var(--card2); border:1px solid var(--line); border-ra
.modelchip { cursor:pointer; color:var(--accent); text-decoration:none; }
/* ---------- dashboard / usage metrics ---------- */
.kpi-skeletons { grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.ksk { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; min-height:150px; display:flex; flex-direction:column; gap:12px; }
.ksk i { display:block; height:12px; border-radius:6px; background:linear-gradient(90deg,var(--card2) 25%,var(--line) 37%,var(--card2) 63%); background-size:400% 100%; animation:shimmer 1.2s infinite; }
.ksk i:nth-child(1){ width:40%; } .ksk i:nth-child(2){ width:70%; height:22px; } .ksk i:nth-child(3){ width:100%; height:64px; }
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:0 0} }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:18px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); }
.kpi .k-hdr { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
@ -683,7 +688,8 @@ async function renderStatus() {
<td><span class="muted">${esc(x.base_url || '')}</span></td>
<td>${x.max_concurrent}</td></tr>`).join('') : '';
$('#tab-status').innerHTML = `
<div class="kpis" id="kpi-row"></div>
<div class="kpis" id="kpi-row"><div class="kpi-skeletons" aria-hidden="true">${Array(5).fill('').map(() => `
<div class="ksk"><i></i><i></i><i></i></div>`).join('')}</div></div>
<div class="card"><h2>${t('connTitle')}</h2>
<div class="muted">${t('connHint')}</div>
<pre class="configbox" id="conncfg"></pre>