Merge branch 'feat/frontend-performance-audit' into main

package-lock.json

@@ -3569,6 +3569,31 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.13.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.12.tgz",
+      "integrity": "sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.13.12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.13.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz",
+      "integrity": "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tokenizer/token": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.3.0.tgz",
@@ -8018,6 +8043,7 @@
         "@chakra-ui/transition": "^2.1.0",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
+        "@tanstack/react-virtual": "^3.13.12",
         "@types/uuid": "^10.0.0",
         "events": "^3.3.0",
         "framer-motion": "^12.5.0",

packages/frontend/package.json

@@ -19,6 +19,7 @@
     "@chakra-ui/transition": "^2.1.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@tanstack/react-virtual": "^3.13.12",
     "@types/uuid": "^10.0.0",
     "events": "^3.3.0",
     "framer-motion": "^12.5.0",

packages/frontend/src/App.tsx

@@ -130,7 +130,8 @@ const RekordboxReader: React.FC = () => {
     loadNextPage,
     searchSongs,
     searchQuery,
-    refresh
+    refresh,
+    switchPlaylistImmediately
   } = usePaginatedSongs({ pageSize: 100, playlistName: currentPlaylist });
 
   // Export library to XML
@@ -209,6 +210,10 @@ const RekordboxReader: React.FC = () => {
     // Clear selected song immediately to prevent stale state
     setSelectedSong(null);
     
+    // Kick off data load immediately to avoid delay before backend call
+    const target = name || "All Songs";
+    switchPlaylistImmediately(target);
+
     // Navigate immediately without any delays
     if (name === "All Songs") {
       navigate("/", { replace: true });
@@ -305,8 +310,7 @@ const RekordboxReader: React.FC = () => {
       return nodes.map(node => {
         if (node.type === 'playlist' && node.name === currentPlaylist) {
           const remainingTracks = (node.tracks || []).filter(id => !songIds.includes(id));
-          const remainingOrder = (node.order || []).filter(id => !songIds.includes(id));
+          return { ...node, tracks: remainingTracks } as PlaylistNode;
-          return { ...node, tracks: remainingTracks, order: remainingOrder } as PlaylistNode;
         }
         if (node.type === 'folder' && node.children) {
           return { ...node, children: applyRemove(node.children) } as PlaylistNode;

packages/frontend/src/components/BackgroundJobProgress.tsx

@@ -8,7 +8,6 @@ import {
   VStack,
   HStack,
   Badge,
-  IconButton,
   useDisclosure,
   Modal,
   ModalOverlay,
@@ -24,7 +23,6 @@ import {
   Td,
   Spinner,
 } from '@chakra-ui/react';
-import { CloseIcon } from '@chakra-ui/icons';
 import { api } from '../services/api';
 
 interface JobProgress {
@@ -55,7 +53,7 @@ export const BackgroundJobProgress: React.FC<BackgroundJobProgressProps> = ({
   const [jobs, setJobs] = useState<JobProgress[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { isOpen, onClose } = useDisclosure();
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
   // Load all jobs
@@ -180,7 +178,7 @@ export const BackgroundJobProgress: React.FC<BackgroundJobProgressProps> = ({
   };
 
   const activeJobs = jobs.filter(job => job.status === 'running');
-  const completedJobs = jobs.filter(job => job.status === 'completed' || job.status === 'failed');
+  // const completedJobs = jobs.filter(job => job.status === 'completed' || job.status === 'failed');
 
   return (
     <>

packages/frontend/src/components/PaginatedSongList.tsx

@@ -20,6 +20,8 @@ import { api } from '../services/api';
 import { formatDuration, formatTotalDuration } from '../utils/formatters';
 import { useDebounce } from '../hooks/useDebounce';
 import { PlaylistSelectionModal } from './PlaylistSelectionModal';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import type { VirtualItem } from '@tanstack/react-virtual';
 
 interface PaginatedSongListProps {
   songs: Song[];
@@ -51,11 +53,12 @@ const SongItem = memo<{
   onToggleSelection: (songId: string) => void;
   showCheckbox: boolean;
   onPlaySong?: (song: Song) => void;
-  onDragStart: (e: React.DragEvent, songIdsFallback: string[]) => void;
+  showDropIndicatorTop?: boolean;
+  onDragStart?: (e: React.DragEvent, songIdsFallback: string[]) => void;
   onRowDragOver?: (e: React.DragEvent) => void;
   onRowDrop?: (e: React.DragEvent) => void;
   onRowDragStartCapture?: (e: React.DragEvent) => void;
-}>(({ song, isSelected, isHighlighted, onSelect, onToggleSelection, showCheckbox, onPlaySong, onDragStart, onRowDragOver, onRowDrop, onRowDragStartCapture }) => {
+}>(({ 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]);
   const handleClick = useCallback(() => {
@@ -89,14 +92,15 @@ const SongItem = memo<{
       _hover={{ bg: isHighlighted ? "blue.800" : "gray.700" }}
       onClick={handleClick}
       transition="background-color 0.2s"
-      draggable
+      {...(onDragStart ? { draggable: true, onDragStart: (e: React.DragEvent) => onDragStart(e, [song.id]) } : {})}
-      onDragStart={(e) => {
+      {...(onRowDragOver ? { onDragOver: onRowDragOver } : {})}
-        onDragStart(e, [song.id]);
+      {...(onRowDrop ? { onDrop: onRowDrop } : {})}
-      }}
+      {...(onRowDragStartCapture ? { onDragStartCapture: onRowDragStartCapture } : {})}
-      onDragOver={onRowDragOver}
+      position="relative"
-      onDrop={onRowDrop}
-      onDragStartCapture={onRowDragStartCapture}
     >
+      {showDropIndicatorTop && (
+        <Box position="absolute" top={0} left={0} right={0} height="2px" bg="blue.400" zIndex={1} />
+      )}
       {showCheckbox && (
         <Checkbox
           isChecked={isSelected}
@@ -277,67 +281,13 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
     dragSelectionRef.current = null;
   }, []);
 
-  // Memoized song items to prevent unnecessary re-renders
+  // Virtualizer for large lists
-  const songItems = useMemo(() => {
+  const rowVirtualizer = useVirtualizer({
-    return songs.map((song, index) => (
+    count: songs.length,
-      <SongItem
+    getScrollElement: () => scrollContainerRef.current,
-        key={song.id}
+    estimateSize: () => 64,
-        song={song}
+    overscan: 8
-        isSelected={selectedSongs.has(song.id)}
+  });
-        isHighlighted={selectedSongId === song.id}
-        onSelect={handleSongSelect}
-        onToggleSelection={toggleSelection}
-        showCheckbox={selectedSongs.size > 0 || depth === 0}
-        onPlaySong={onPlaySong}
-        onDragStart={handleDragStart}
-        // Simple playlist reordering within same list by dragging rows
-        onRowDragOver={(e: React.DragEvent) => {
-          if (!onReorder || !currentPlaylist) return;
-          e.preventDefault();
-          setDragHoverIndex(index);
-        }}
-         onRowDrop={async (e: React.DragEvent) => {
-          if (!onReorder || !currentPlaylist) return;
-          e.preventDefault();
-           const fromId = e.dataTransfer.getData('text/song-id');
-           const multiJson = e.dataTransfer.getData('application/json');
-           let multiIds: string[] | null = null;
-           if (multiJson) {
-             try {
-               const parsed = JSON.parse(multiJson);
-               if (parsed && parsed.type === 'songs' && Array.isArray(parsed.songIds)) {
-                 multiIds = parsed.songIds as string[];
-               }
-             } catch {}
-           }
-           if (!fromId && !multiIds) return;
-           const fromIndex = fromId ? songs.findIndex(s => s.id === fromId) : -1;
-          const toIndex = index;
-           if (toIndex < 0) return;
-           if (fromId && fromIndex >= 0 && fromIndex === toIndex) return;
-          const toId = songs[index].id;
-           // If multiple, move block; else move single
-           if (multiIds && multiIds.length > 0) {
-             await api.moveTracksInPlaylist(currentPlaylist, multiIds, toId);
-           } else {
-             await api.moveTrackInPlaylist(currentPlaylist, fromId!, toId);
-           }
-          await onReorder(songs.map(s => s.id)); // trigger refresh via parent
-           setDragHoverIndex(null);
-           setIsReorderDragging(false);
-        }}
-        onRowDragStartCapture={(e: React.DragEvent) => {
-            // Provide a simple id for intra-list reorder
-          if (!currentPlaylist) return;
-          e.dataTransfer.setData('text/song-id', song.id);
-          // Explicitly set effect to move for better UX
-          try { e.dataTransfer.effectAllowed = 'move'; } catch {}
-          try { e.dataTransfer.dropEffect = 'move'; } catch {}
-           setIsReorderDragging(true);
-        }}
-      />
-    ));
-  }, [songs, selectedSongs, selectedSongId, toggleSelection, depth, onPlaySong, handleDragStart]); // Removed handleSongSelect since it's already memoized
 
   // Use total playlist duration if available, otherwise calculate from current songs
   const totalDuration = useMemo(() => {
@@ -503,7 +453,7 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
         </Flex>
       </Box>
 
-      {/* Scrollable Song List */}
+      {/* Scrollable Song List (virtualized) */}
       <Box 
         ref={scrollContainerRef}
         flex={1} 
@@ -511,16 +461,76 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
         mt={2} 
         id="song-list-container"
       >
-        <Flex direction="column" gap={2}>
+        <Box position="relative" height={`${rowVirtualizer.getTotalSize()}px`}>
           <Box onDragEnd={handleDragEnd}>
-            {songs.map((song, index) => (
+            {rowVirtualizer.getVirtualItems().map((virtualRow: VirtualItem) => {
-              <Box key={`row-${song.id}`} position="relative">
+              const index = virtualRow.index;
-                {dragHoverIndex === index && (
+              const song = songs[index];
-                  <Box position="absolute" top={0} left={0} right={0} height="2px" bg="blue.400" zIndex={1} />
+              const allowReorder = Boolean(onReorder && currentPlaylist);
+              return (
+                <Box
+                  key={song ? song.id : index}
+                  position="absolute"
+                  top={0}
+                  left={0}
+                  right={0}
+                  transform={`translateY(${virtualRow.start}px)`}
+                >
+                  {song && (
+                    <SongItem
+                      song={song}
+                      isSelected={selectedSongs.has(song.id)}
+                      isHighlighted={selectedSongId === song.id}
+                      onSelect={handleSongSelect}
+                      onToggleSelection={toggleSelection}
+                      showCheckbox={selectedSongs.size > 0 || depth === 0}
+                      onPlaySong={onPlaySong}
+                      showDropIndicatorTop={dragHoverIndex === index}
+                      onDragStart={handleDragStart}
+                      onRowDragOver={allowReorder ? ((e: React.DragEvent) => {
+                        if (!onReorder || !currentPlaylist) return;
+                        e.preventDefault();
+                        setDragHoverIndex(index);
+                      }) : undefined}
+                      onRowDrop={allowReorder ? (async (e: React.DragEvent) => {
+                        if (!onReorder || !currentPlaylist) return;
+                        e.preventDefault();
+                        const fromId = e.dataTransfer.getData('text/song-id');
+                        const multiJson = e.dataTransfer.getData('application/json');
+                        let multiIds: string[] | null = null;
+                        if (multiJson) {
+                          try {
+                            const parsed = JSON.parse(multiJson);
+                            if (parsed && parsed.type === 'songs' && Array.isArray(parsed.songIds)) {
+                              multiIds = parsed.songIds as string[];
+                            }
+                          } catch {}
+                        }
+                        if (!fromId && !multiIds) return;
+                        const toId = songs[index]?.id;
+                        if (!toId) return;
+                        if (multiIds && multiIds.length > 0) {
+                          await api.moveTracksInPlaylist(currentPlaylist, multiIds, toId);
+                        } else {
+                          await api.moveTrackInPlaylist(currentPlaylist, fromId!, toId);
+                        }
+                        await onReorder(songs.map(s => s.id));
+                        setDragHoverIndex(null);
+                        setIsReorderDragging(false);
+                      }) : undefined}
+                      onRowDragStartCapture={allowReorder ? ((e: React.DragEvent) => {
+                        if (!currentPlaylist) return;
+                        e.dataTransfer.setData('text/song-id', song.id);
+                        try { e.dataTransfer.effectAllowed = 'move'; } catch {}
+                        try { e.dataTransfer.dropEffect = 'move'; } catch {}
+                        setIsReorderDragging(true);
+                      }) : undefined}
+                    />
                   )}
-                {songItems[index]}
                 </Box>
-            ))}
+              );
+            })}
+          </Box>
         </Box>
 
           {/* Drop zone to move item to end of playlist */}
@@ -607,7 +617,7 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
               </Text>
             </Flex>
           )}
-        </Flex>
+        
       </Box>
 
       {/* Playlist Selection Modal */}

packages/frontend/src/components/PlaylistManager.tsx

@@ -337,7 +337,7 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
   );
 });
 
-export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
+const PlaylistManagerComponent: React.FC<PlaylistManagerProps> = ({
   playlists,
   selectedItem,
   onPlaylistCreate,
@@ -563,3 +563,5 @@ export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
     </Box>
   );
 };
+
+export const PlaylistManager = React.memo(PlaylistManagerComponent);

packages/frontend/src/components/PlaylistSelectionModal.tsx

@@ -16,10 +16,9 @@ import {
   Icon,
   useToast,
   Box,
-  Divider,
 } from '@chakra-ui/react';
-import { SearchIcon, FolderIcon } from '@chakra-ui/icons';
+import { SearchIcon } from '@chakra-ui/icons';
-import { FiFolder, FiMusic } from 'react-icons/fi';
+import { FiMusic } from 'react-icons/fi';
 import type { PlaylistNode } from '../types/interfaces';
 
 interface PlaylistSelectionModalProps {

packages/frontend/src/hooks/usePaginatedSongs.ts

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useLayoutEffect, useCallback, useRef } from 'react';
 import { api, type SongsResponse } from '../services/api';
 import type { Song } from '../types/interfaces';
 
@@ -139,7 +139,7 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
   }, []);
 
   // Handle playlist changes - streamlined for immediate response
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (previousPlaylistRef.current !== playlistName) {
       // Update refs immediately
       currentPlaylistRef.current = playlistName;
@@ -160,6 +160,26 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
     }
   }, [playlistName, initialSearch, loadPage]);
 
+  // Imperative method to switch playlist and start loading immediately
+  const switchPlaylistImmediately = useCallback((targetPlaylistName: string) => {
+    // Update refs immediately so effect does not double-trigger
+    currentPlaylistRef.current = targetPlaylistName;
+    previousPlaylistRef.current = targetPlaylistName;
+    currentSearchQueryRef.current = searchQuery;
+
+    // Clear state for instant visual feedback
+    setLoading(true);
+    setSongs([]);
+    setTotalSongs(0);
+    setTotalDuration(undefined);
+    setHasMore(true);
+    setCurrentPage(1);
+    setError(null);
+
+    // Start loading right away
+    loadPage(1, initialSearch, targetPlaylistName);
+  }, [initialSearch, loadPage, searchQuery]);
+
   return {
     songs,
     loading,
@@ -174,5 +194,6 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
     searchSongs,
     reset,
     refresh: () => loadPage(1)
+    , switchPlaylistImmediately
   };
 }; 

packages/frontend/src/pages/S3Configuration.tsx

@@ -18,13 +18,12 @@ import {
   CardBody,
   CardHeader,
   Spinner,
-  Divider,
   Badge,
   Icon,
   Switch,
   FormHelperText,
 } from '@chakra-ui/react';
-import { FiCheck, FiX, FiSettings, FiZap, FiSave } from 'react-icons/fi';
+import { FiSettings, FiZap, FiSave } from 'react-icons/fi';
 
 interface S3Config {
   endpoint: string;