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

@@ -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 });
     }
   };
 

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}

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
+      // Batch all state updates together to reduce re-renders
+      React.startTransition(() => {
         setSongs([]);
         setHasMore(true);
         setCurrentPage(1);
         setSearchQuery(initialSearch);
         setError(null);
-      // Load immediately without setTimeout
+      });
+      
+      // Load immediately
       loadPage(1, initialSearch, playlistName);
     }
   }, [playlistName, initialSearch, loadPage]);