diff --git a/packages/frontend/src/components/PaginatedSongList.tsx b/packages/frontend/src/components/PaginatedSongList.tsx index edd6512..6ebdd9a 100644 --- a/packages/frontend/src/components/PaginatedSongList.tsx +++ b/packages/frontend/src/components/PaginatedSongList.tsx @@ -61,12 +61,18 @@ const SongItem = memo<{ }>(({ song, isSelected, isHighlighted, onSelect, onToggleSelection, showCheckbox, onPlaySong, showDropIndicatorTop, onDragStart, onRowDragOver, onRowDrop, onRowDragStartCapture }) => { // Memoize the formatted duration to prevent recalculation const formattedDuration = useMemo(() => formatDuration(song.totalTime || ''), [song.totalTime]); + // Local optimistic selection for instant visual feedback + const [localChecked, setLocalChecked] = useState(isSelected); + useEffect(() => { + setLocalChecked(isSelected); + }, [isSelected]); const handleClick = useCallback(() => { onSelect(song); }, [onSelect, song]); const handleCheckboxClick = useCallback((e: React.ChangeEvent) => { e.stopPropagation(); + setLocalChecked(e.target.checked); onToggleSelection(song.id); }, [onToggleSelection, song.id]); @@ -103,7 +109,7 @@ const SongItem = memo<{ )} {showCheckbox && ( e.stopPropagation()}