From 966240b0d191ca0b566de1c64633de3dbbbb1f14 Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Wed, 6 Aug 2025 11:18:09 +0200
Subject: [PATCH] =?UTF-8?q?perf:=20Streamline=20playlist=20switching=20flo?=
 =?UTF-8?q?w=20for=20faster,=20cleaner=20transitions=20-=20Clear=20all=20s?=
 =?UTF-8?q?tate=20immediately=20(songs,=20totalSongs,=20totalDuration)=20o?=
 =?UTF-8?q?n=20playlist=20switch=20-=20Combine=20switching=20and=20loading?=
 =?UTF-8?q?=20states=20into=20single=20spinner=20with=20dynamic=20text=20-?=
 =?UTF-8?q?=20Remove=20duplicate=20switching=20indicators=20to=20prevent?=
 =?UTF-8?q?=20UI=20flicker=20-=20Reset=20switching=20state=20when=20loadin?=
 =?UTF-8?q?g=20starts=20for=20immediate=20transition=20-=20Eliminates=20co?=
 =?UTF-8?q?nfusing=20flow:=20switching=20=E2=86=92=20old=20data=20?=
 =?UTF-8?q?=E2=86=92=200=20of=20X=20=E2=86=92=20loading=20=E2=86=92=20new?=
 =?UTF-8?q?=20data=20-=20Now=20shows:=20switching=20=E2=86=92=20loading=20?=
 =?UTF-8?q?=E2=86=92=20new=20data=20(much=20cleaner)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/App.tsx                 |  6 ++---
 .../src/components/PaginatedSongList.tsx      | 25 ++++++-------------
 .../frontend/src/hooks/usePaginatedSongs.ts   | 18 ++++++-------
 3 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index 7f36ea0..a3104b9 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -154,12 +154,12 @@ export default function RekordboxReader() {
     }
   }, [currentPlaylist, playlists, navigate, xmlLoading]);
 
-  // Reset switching state when songs are loaded
+  // Reset switching state when loading starts (immediate transition)
   useEffect(() => {
-    if (songs.length > 0 && isSwitchingPlaylist) {
+    if (songsLoading && isSwitchingPlaylist) {
       setIsSwitchingPlaylist(false);
     }
-  }, [songs.length, isSwitchingPlaylist]);
+  }, [songsLoading, isSwitchingPlaylist]);
 
   const handlePlaylistSelect = (name: string) => {
     // Set switching state immediately for visual feedback
diff --git a/packages/frontend/src/components/PaginatedSongList.tsx b/packages/frontend/src/components/PaginatedSongList.tsx
index 29c610c..70eccd6 100644
--- a/packages/frontend/src/components/PaginatedSongList.tsx
+++ b/packages/frontend/src/components/PaginatedSongList.tsx
@@ -409,12 +409,12 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
         <Flex direction="column" gap={2}>
           {songItems}
           
-          {/* Loading indicator for infinite scroll */}
-          {loading && (
+          {/* Loading indicator for infinite scroll or playlist switching */}
+          {(loading || isSwitchingPlaylist) && (
             <Flex justify="center" align="center" p={6} key="loading-spinner" gap={3}>
               <Spinner size="md" color="blue.400" />
               <Text color="gray.400" fontSize="sm">
-                Loading more songs...
+                {isSwitchingPlaylist ? 'Switching playlist...' : 'Loading more songs...'}
               </Text>
             </Flex>
           )}
@@ -440,21 +440,12 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
             </Flex>
           )}
           
-          {/* No results message or playlist switching indicator */}
-          {!loading && songs.length === 0 && (
+          {/* No results message */}
+          {!loading && !isSwitchingPlaylist && songs.length === 0 && (
             <Flex justify="center" p={8} key="no-results" direction="column" align="center" gap={3}>
-              {isSwitchingPlaylist ? (
-                <>
-                  <Spinner size="md" color="blue.400" />
-                  <Text color="blue.400" fontSize="sm" fontWeight="medium">
-                    Switching playlist...
-                  </Text>
-                </>
-              ) : (
-                <Text color="gray.500">
-                  {searchQuery ? 'No songs found matching your search' : 'No songs available'}
-                </Text>
-              )}
+              <Text color="gray.500">
+                {searchQuery ? 'No songs found matching your search' : 'No songs available'}
+              </Text>
             </Flex>
           )}
         </Flex>
diff --git a/packages/frontend/src/hooks/usePaginatedSongs.ts b/packages/frontend/src/hooks/usePaginatedSongs.ts
index e0bc952..249548a 100644
--- a/packages/frontend/src/hooks/usePaginatedSongs.ts
+++ b/packages/frontend/src/hooks/usePaginatedSongs.ts
@@ -138,7 +138,7 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
     };
   }, []);
 
-  // Handle playlist changes - optimized for immediate response
+  // Handle playlist changes - streamlined for immediate response
   useEffect(() => {
     if (previousPlaylistRef.current !== playlistName) {
       // Update refs immediately
@@ -146,16 +146,14 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
       currentSearchQueryRef.current = searchQuery;
       previousPlaylistRef.current = playlistName;
       
-      // Clear songs IMMEDIATELY for instant visual feedback
+      // Clear all state immediately for instant visual feedback
       setSongs([]);
-      
-      // Batch remaining state updates together to reduce re-renders
-      React.startTransition(() => {
-        setHasMore(true);
-        setCurrentPage(1);
-        setSearchQuery(initialSearch);
-        setError(null);
-      });
+      setTotalSongs(0);
+      setTotalDuration(undefined);
+      setHasMore(true);
+      setCurrentPage(1);
+      setSearchQuery(initialSearch);
+      setError(null);
       
       // Load immediately
       loadPage(1, initialSearch, playlistName);