From 54b22d5cc5a9d62c19c57f14e9dcf5de6ae694a7 Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Wed, 13 Aug 2025 15:57:26 +0200
Subject: [PATCH] perf(frontend): instant checkbox feedback via local
 optimistic selection in virtualized list

---
 packages/frontend/src/components/PaginatedSongList.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

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<boolean>(isSelected);
+  useEffect(() => {
+    setLocalChecked(isSelected);
+  }, [isSelected]);
   const handleClick = useCallback(() => {
     onSelect(song);
   }, [onSelect, song]);
 
   const handleCheckboxClick = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     e.stopPropagation();
+    setLocalChecked(e.target.checked);
     onToggleSelection(song.id);
   }, [onToggleSelection, song.id]);
 
@@ -103,7 +109,7 @@ const SongItem = memo<{
       )}
       {showCheckbox && (
         <Checkbox
-          isChecked={isSelected}
+          isChecked={localChecked}
           onChange={handleCheckboxClick}
           mr={3}
           onClick={(e) => e.stopPropagation()}