Compare commits

...

1 Commits

Author SHA1 Message Date
Claude baee028792 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.
2026-07-25 18:57:02 +00:00
2 changed files with 2 additions and 2 deletions
@@ -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}
/>
@@ -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>
);
}