mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-11 10:23:54 +00:00
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.
This commit is contained in:
@@ -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}
|
||||
/>
|
||||
|
||||
+1
-1
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user