master/rekordbox-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(frontend): instant checkbox feedback via local optimistic selection in virtualized list

Browse Source
This commit is contained in:
Geert Rademakes 2025-08-13 15:57:26 +02:00
parent 517af140cf
commit 54b22d5cc5
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/frontend/src/components/PaginatedSongList.tsx
View File

@ -61,12 +61,18 @@ const SongItem = memo<{
}>(({ song, isSelected, isHighlighted, onSelect, onToggleSelection, showCheckbox, onPlaySong, showDropIndicatorTop, onDragStart, onRowDragOver, onRowDrop, onRowDragStartCapture }) => { }>(({ song, isSelected, isHighlighted, onSelect, onToggleSelection, showCheckbox, onPlaySong, showDropIndicatorTop, onDragStart, onRowDragOver, onRowDrop, onRowDragStartCapture }) => {
// Memoize the formatted duration to prevent recalculation // Memoize the formatted duration to prevent recalculation
const formattedDuration = useMemo(() => formatDuration(song.totalTime || ''), [song.totalTime]); const formattedDuration = useMemo(() => formatDuration(song.totalTime || ''), [song.totalTime]);
// Local optimistic selection for instant visual feedback
const [localChecked, setLocalChecked] = useState<boolean>(isSelected);
useEffect(() => {
setLocalChecked(isSelected);
}, [isSelected]);
const handleClick = useCallback(() => { const handleClick = useCallback(() => {
onSelect(song); onSelect(song);
}, [onSelect, song]); }, [onSelect, song]);
const handleCheckboxClick = useCallback((e: React.ChangeEvent<HTMLInputElement>) => { const handleCheckboxClick = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
e.stopPropagation(); e.stopPropagation();
setLocalChecked(e.target.checked);
onToggleSelection(song.id); onToggleSelection(song.id);
}, [onToggleSelection, song.id]); }, [onToggleSelection, song.id]);
@ -103,7 +109,7 @@ const SongItem = memo<{
)} )}
{showCheckbox && ( {showCheckbox && (
<Checkbox <Checkbox
isChecked={isSelected} isChecked={localChecked}
onChange={handleCheckboxClick} onChange={handleCheckboxClick}
mr={3} mr={3}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}