From baee0287926da6fdb8c3665da9e5015e528b0475 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 25 Jul 2026 18:57:02 +0000
Subject: [PATCH] fix(cuesheet): reduce image reload flicker when scrolling

Cuesheet rows are virtualized (react-virtuoso), so rows scrolling out
of the small overscan buffer get unmounted, destroying their <img>
elements; scrolling back remounts them from scratch. Native
loading='lazy' on the image compounded this with an extra deferred
load on every remount. Widen the overscan buffer and drop the
redundant lazy attribute so images stay mounted through normal
scroll-and-back gestures.
---
 apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx | 2 +-
 .../cuesheet-table/cuesheet-table-elements/EditableImage.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
index 32c3f60ac..5af1cfcb3 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
@@ -260,7 +260,7 @@ export default function CuesheetTable({
         context={virtuosoContext}
         style={tableRoot === 'editor' ? { paddingLeft: '1rem' } : undefined}
         computeItemKey={computeItemKey}
-        increaseViewportBy={{ top: 100, bottom: 200 }}
+        increaseViewportBy={{ top: 300, bottom: 600 }}
         components={virtuosoComponents}
         fixedHeaderContent={fixedHeaderContent}
       />
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx
index a9bbc00be..104ca3e78 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx
@@ -62,7 +62,7 @@ function EditableImage({ initialValue, readOnly, updateValue }: EditableImagePro
           </Button>
         </div>
       )}
-      {Boolean(initialValue) && <img loading='lazy' src={initialValue} className={style.image} />}
+      {Boolean(initialValue) && <img src={initialValue} className={style.image} />}
     </div>
   );
 }