dtoro/mule-image
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(preview): preload thumbs for ±5 neighbors, not just adjacent

Browse Source
This commit is contained in:
Claudio
2026-05-11 10:32:14 +02:00
parent 6311412fc0
commit a0d275490b
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/preview/PreviewView.tsx
View File

@@ -138,13 +138,17 @@ export function PreviewView() {
useHotkeys('right', goNext, { preventDefault: true })
useHotkeys('i', () => setInfoPanelOpen((v) => !v), { preventDefault: true })
// Preload the immediate neighbors so arrow nav feels instant. Skip videos
// (browsers can't preload them via Image()) and skip when at the edges.
// Preload the ±5 neighbor thumbnails so arrow nav feels instant. Cheap
// because getPreviewImageSrc returns the 1280px thumb; the current photo's
// full-res /proxy upgrade is handled separately inside PreviewImage. Skip
// videos (browsers can't preload them via Image()) and clamp to bounds.
useEffect(() => {
const neighbors: Photo[] = []
if (safeIndex > 0) neighbors.push(photos[safeIndex - 1])
if (safeIndex < photos.length - 1) neighbors.push(photos[safeIndex + 1])
for (const p of neighbors) {
const PRELOAD_RADIUS = 5
const start = Math.max(0, safeIndex - PRELOAD_RADIUS)
const end = Math.min(photos.length - 1, safeIndex + PRELOAD_RADIUS)
for (let i = start; i <= end; i++) {
if (i === safeIndex) continue
const p = photos[i]
if (isVideo(p)) continue
const img = new Image()
img.src = getPreviewImageSrc(p)