fix(ui): replace full-page loading overlay with grid-scoped loader to eliminate flicker

- Add .grid-loading-overlay CSS: position:absolute inside card grid,
  semi-transparent dark background, z-index 100, pointer-events:none
- Add showGridLoading() / hideGridLoading() to VirtualScroller:
  creates/removes the scoped overlay inside the card grid only
- Modify loadMoreWithVirtualScroll(): replace full-page
  state.loadingManager overlay with grid-scoped loading, defer
  hide via requestAnimationFrame to eliminate blank-frame gap
- Clean up gridLoadingOverlay in dispose() to prevent DOM leak
This commit is contained in:
Will Miao
2026-06-24 21:11:13 +08:00
parent ea14d211be
commit 93ad81ed87
3 changed files with 56 additions and 2 deletions

View File

@@ -734,6 +734,21 @@ body.hide-card-version .hl-badge {
}
}
/* Grid-scoped loading overlay (replaces full-page overlay for VirtualScroller refreshes) */
.grid-loading-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--lora-bg-transparent, oklch(0% 0 0 / 0.3));
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
pointer-events: none;
}
/* Add after the existing .model-card:hover styles */
@keyframes update-pulse {