From 770c6065619478b60658a7103b7e39f1093abddf Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Wed, 6 Aug 2025 10:59:16 +0200
Subject: [PATCH] perf: Aggressive optimization for playlist switching to make
 it snappy - Add React.startTransition to batch state updates in
 usePaginatedSongs - Optimize playlist selection handler with immediate
 navigation - Memoize click handlers in PlaylistItem to prevent recreation -
 Use replace navigation to avoid history stack delays - Should dramatically
 reduce 600+ms playlist switching delay

---
 packages/frontend/src/App.tsx                 | 12 ++++++----
 .../src/components/PlaylistManager.tsx        | 13 +++++++++--
 .../frontend/src/hooks/usePaginatedSongs.ts   | 23 +++++++++++--------
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index 80d6dd8..0ddf15b 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -1,6 +1,6 @@
 import { Box, Button, Flex, Heading, Spinner, Text, useBreakpointValue, IconButton, Drawer, DrawerBody, DrawerHeader, DrawerOverlay, DrawerContent, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, VStack } from "@chakra-ui/react";
 import { ChevronLeftIcon, ChevronRightIcon, SettingsIcon } from "@chakra-ui/icons";
-import { useState, useRef, useEffect, useCallback } from "react";
+import React, { useState, useRef, useEffect, useCallback } from "react";
 import { useNavigate, useLocation, Routes, Route } from "react-router-dom";
 import { PaginatedSongList } from "./components/PaginatedSongList";
 import { PlaylistManager } from "./components/PlaylistManager";
@@ -154,13 +154,15 @@ export default function RekordboxReader() {
   }, [currentPlaylist, playlists, navigate, xmlLoading]);
 
   const handlePlaylistSelect = (name: string) => {
-    setSelectedSong(null); // Clear selected song when changing playlists
+    // Clear selected song immediately to prevent stale state
+    setSelectedSong(null);
+    
+    // Navigate immediately without any delays
     if (name === "All Songs") {
-      navigate("/");
+      navigate("/", { replace: true });
     } else {
-      // Use encodeURIComponent to properly handle spaces and special characters
       const encodedName = encodeURIComponent(name);
-      navigate(`/playlists/${encodedName}`);
+      navigate(`/playlists/${encodedName}`, { replace: true });
     }
   };
 
diff --git a/packages/frontend/src/components/PlaylistManager.tsx b/packages/frontend/src/components/PlaylistManager.tsx
index fd58e72..413bfad 100644
--- a/packages/frontend/src/components/PlaylistManager.tsx
+++ b/packages/frontend/src/components/PlaylistManager.tsx
@@ -101,6 +101,15 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
   allFolders,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  
+  // Memoize click handlers to prevent recreation
+  const handlePlaylistClick = useCallback(() => {
+    onPlaylistSelect(node.name);
+  }, [onPlaylistSelect, node.name]);
+
+  const handleFolderToggle = useCallback(() => {
+    setIsOpen(prev => !prev);
+  }, []);
   const indent = level * 10; // Reverted back to 10px per level
 
   if (node.type === 'folder') {
@@ -110,7 +119,7 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
           <Button
             flex={1}
             {...unselectedButtonStyles}
-            onClick={() => setIsOpen(!isOpen)}
+            onClick={handleFolderToggle}
             ml={indent}
             pl={level > 0 ? 6 : 4} // Add extra padding for nested items
             justifyContent="flex-start"
@@ -178,7 +187,7 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
       <Button
         flex="1 1 auto"
         {...(selectedItem === node.name ? selectedButtonStyles : unselectedButtonStyles)}
-        onClick={() => onPlaylistSelect(node.name)}
+        onClick={handlePlaylistClick}
         ml={indent}
         pl={level > 0 ? 6 : 4} // Add extra padding for nested items
         borderRightRadius={0}
diff --git a/packages/frontend/src/hooks/usePaginatedSongs.ts b/packages/frontend/src/hooks/usePaginatedSongs.ts
index ba38a60..f267cf1 100644
--- a/packages/frontend/src/hooks/usePaginatedSongs.ts
+++ b/packages/frontend/src/hooks/usePaginatedSongs.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { api, type SongsResponse } from '../services/api';
 import type { Song } from '../types/interfaces';
 
@@ -138,21 +138,24 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
     };
   }, []);
 
-  // Handle playlist changes
+  // Handle playlist changes - optimized for immediate response
   useEffect(() => {
     if (previousPlaylistRef.current !== playlistName) {
-      // Update refs
+      // Update refs immediately
       currentPlaylistRef.current = playlistName;
       currentSearchQueryRef.current = searchQuery;
       previousPlaylistRef.current = playlistName;
       
-      // Clear songs for new playlist to replace them
-      setSongs([]);
-      setHasMore(true);
-      setCurrentPage(1);
-      setSearchQuery(initialSearch);
-      setError(null);
-      // Load immediately without setTimeout
+      // Batch all state updates together to reduce re-renders
+      React.startTransition(() => {
+        setSongs([]);
+        setHasMore(true);
+        setCurrentPage(1);
+        setSearchQuery(initialSearch);
+        setError(null);
+      });
+      
+      // Load immediately
       loadPage(1, initialSearch, playlistName);
     }
   }, [playlistName, initialSearch, loadPage]);