fix: show loading skeleton during engine switch and initial boot

引擎切换和初始启动时 boot() 是异步的,期间内容区完全空白。
现在在 boot() 开始前立即显示骨架屏动画,消除空白等待期。
- sidebar.js: 引擎切换点击时立即在 content 区注入骨架屏
- main.js: 初始启动 boot() 前也显示骨架屏
This commit is contained in:
晴天
2026-04-13 11:14:33 +08:00
parent 6d0fad10f7
commit 7e527228c2
2 changed files with 22 additions and 0 deletions

View File

@@ -303,6 +303,17 @@ export function renderSidebar(el) {
_closeEngineDropdown()
if (eid !== getActiveEngineId()) {
engineOpt.style.opacity = '0.5'
// 立即在内容区显示加载骨架,避免切换期间空白
const contentEl = document.getElementById('content')
if (contentEl) {
contentEl.innerHTML = `<div class="page" style="padding:32px">
<div class="skeleton-line" style="width:200px;height:28px;margin-bottom:24px"></div>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px">
${[1,2,3].map(() => '<div class="card"><div class="card-body" style="padding:16px"><div class="skeleton-line" style="width:60%;height:12px;margin-bottom:10px"></div><div class="skeleton-line" style="width:80%;height:20px"></div></div></div>').join('')}
</div>
<div class="card"><div class="card-body" style="padding:20px"><div class="skeleton-line" style="width:40%;height:16px;margin-bottom:16px"></div><div class="skeleton-line" style="height:36px"></div></div></div>
</div>`
}
switchEngine(eid).then(() => {
toast(t('engine.switchedTo', { name: getActiveEngine()?.name || eid }), 'success')
renderSidebar(el)