superrob1500
/
mirror-immich
mirror of https://github.com/immich-app/immich
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(web): skip thumbhash fade for offscreen thumbnails (#27335)

pull/28763/head
Min Idzelis 2026-06-02 07:42:33 -04:00 committed by GitHub
parent c5fb67c004
commit 03554b24ad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/lib/components/assets/thumbnail/Thumbnail.svelte
View File

@ -78,6 +78,7 @@
let mouseOver = $state(false); let mouseOver = $state(false);
let loaded = $state(false); let loaded = $state(false);
let thumbError = $state(false); let thumbError = $state(false);
let skipFade = $state(false);
let width = $derived(thumbnailSize || thumbnailWidth || 235); let width = $derived(thumbnailSize || thumbnailWidth || 235);
let height = $derived(thumbnailSize || thumbnailHeight || 235); let height = $derived(thumbnailSize || thumbnailHeight || 235);
@ -252,7 +253,12 @@
widthStyle="{width}px" widthStyle="{width}px"
heightStyle="{height}px" heightStyle="{height}px"
curve={selected} curve={selected}
onComplete={(errored) => ((loaded = true), (thumbError = errored))} onComplete={(errored) => {
const rect = element?.getBoundingClientRect();
skipFade = !rect || rect.bottom < 0 || rect.top > window.innerHeight;
loaded = true;
thumbError = errored;
}}
/> />
{#if asset.isVideo} {#if asset.isVideo}
<div class="pointer-events-none absolute size-full group-focus-visible:rounded-lg"> <div class="pointer-events-none absolute size-full group-focus-visible:rounded-lg">
@ -297,7 +303,10 @@
<Thumbhash <Thumbhash
base64ThumbHash={asset.thumbhash} base64ThumbHash={asset.thumbhash}
data-testid="thumbhash" data-testid="thumbhash"
class={['absolute top-0 object-cover group-focus-visible:rounded-lg', { 'rounded-xl': selected }]} class={[
'absolute top-0 object-cover group-focus-visible:rounded-lg',
{ 'rounded-xl': selected, hidden: skipFade },
]}
style="width: {width}px; height: {height}px" style="width: {width}px; height: {height}px"
draggable="false" draggable="false"
fadeOut fadeOut