From 03554b24ad9603a95cace514156c0235374712f4 Mon Sep 17 00:00:00 2001
From: Min Idzelis <min123@gmail.com>
Date: Tue, 2 Jun 2026 07:42:33 -0400
Subject: [PATCH] fix(web): skip thumbhash fade for offscreen thumbnails
 (#27335)

---
 .../components/assets/thumbnail/Thumbnail.svelte    | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/assets/thumbnail/Thumbnail.svelte b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
index aef52d0cf..347ff3e75 100644
--- a/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
@@ -78,6 +78,7 @@
   let mouseOver = $state(false);
   let loaded = $state(false);
   let thumbError = $state(false);
+  let skipFade = $state(false);
 
   let width = $derived(thumbnailSize || thumbnailWidth || 235);
   let height = $derived(thumbnailSize || thumbnailHeight || 235);
@@ -252,7 +253,12 @@
         widthStyle="{width}px"
         heightStyle="{height}px"
         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}
         <div class="pointer-events-none absolute size-full group-focus-visible:rounded-lg">
@@ -297,7 +303,10 @@
         <Thumbhash
           base64ThumbHash={asset.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"
           draggable="false"
           fadeOut