cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-09-03 21:39:08 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

fix(cuesheet): reduce image reload flicker when scrolling

Browse Source 
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.
This commit is contained in:
Claude
2026-07-25 18:57:02 +00:00
parent 5cf36f049a
commit baee028792
2 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
+1 -1
View File
@@ -260,7 +260,7 @@ export default function CuesheetTable({
context={virtuosoContext} context={virtuosoContext}
style={tableRoot === 'editor' ? { paddingLeft: '1rem' } : undefined} style={tableRoot === 'editor' ? { paddingLeft: '1rem' } : undefined}
computeItemKey={computeItemKey} computeItemKey={computeItemKey}
increaseViewportBy={{ top: 100, bottom: 200 }} increaseViewportBy={{ top: 300, bottom: 600 }}
components={virtuosoComponents} components={virtuosoComponents}
fixedHeaderContent={fixedHeaderContent} fixedHeaderContent={fixedHeaderContent}
/> />
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ function EditableImage({ initialValue, readOnly, updateValue }: EditableImagePro
</Button> </Button>
</div> </div>
)} )}
{Boolean(initialValue) && <img loading='lazy' src={initialValue} className={style.image} />} {Boolean(initialValue) && <img src={initialValue} className={style.image} />}
</div> </div>
); );
} }