feat: implement lazy loading and image caching for thumbnails

Add lazy loading with skeleton animations and IndexedDB-based image caching to improve thumbnail loading performance. The changes include:

- CSS animations for loading states with shimmer effects
- Priority-based image loading queue with configurable concurrency
- Persistent image cache with automatic cleanup
- Error handling and cached image highlighting
- Increased concurrent loading from 3 to 6 for faster initial display

This reduces network requests and provides smoother user experience when browsing large model collections.
This commit is contained in:
Will Miao
2026-02-07 09:53:24 +08:00
parent 5ffca15172
commit 66e9d77c67
2 changed files with 454 additions and 22 deletions

View File

@@ -516,3 +516,51 @@
right: var(--space-1);
}
}
/* ============================================
Lazy Loading Styles
============================================ */
/* Thumbnail lazy loading placeholder */
.thumbnail-rail__item img {
opacity: 0;
transition: opacity 0.3s ease;
background: var(--lora-surface);
}
/* Loaded state */
.thumbnail-rail__item img.loaded {
opacity: 1;
}
/* Loading state with skeleton animation */
.thumbnail-rail__item img.lazy-load {
background: linear-gradient(
90deg,
var(--lora-surface) 25%,
var(--lora-border) 50%,
var(--lora-surface) 75%
);
background-size: 200% 100%;
animation: lazy-loading-shimmer 1.5s infinite;
}
@keyframes lazy-loading-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Error state for failed loads */
.thumbnail-rail__item img.load-error {
opacity: 0.3;
background: var(--lora-error);
}
/* Cached image - subtle highlight */
.thumbnail-rail__item img[data-cached="true"] {
border: 1px solid var(--lora-accent);
}