mirror of
https://github.com/qingchencloud/clawpanel.git
synced 2026-05-30 21:00:30 +08:00
fix: show loading skeleton during engine switch and initial boot
引擎切换和初始启动时 boot() 是异步的,期间内容区完全空白。 现在在 boot() 开始前立即显示骨架屏动画,消除空白等待期。 - sidebar.js: 引擎切换点击时立即在 content 区注入骨架屏 - main.js: 初始启动 boot() 前也显示骨架屏
This commit is contained in:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user