From 510c6e10269ce6ed16e9cf69066986e6b112a671 Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Wed, 6 Aug 2025 10:52:11 +0200
Subject: [PATCH] perf: Optimize playlist manager to fix 727ms click handler
 delay - Memoize button styles to prevent object recreation on every render -
 Wrap PlaylistItem in React.memo to prevent unnecessary re-renders - Fixes
 React violation 'click' handler took 727ms - Should dramatically improve
 playlist switching responsiveness

---
 .../src/components/PlaylistManager.tsx        | 47 ++++++++++++++-----
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/components/PlaylistManager.tsx b/packages/frontend/src/components/PlaylistManager.tsx
index f7cc744..fd58e72 100644
--- a/packages/frontend/src/components/PlaylistManager.tsx
+++ b/packages/frontend/src/components/PlaylistManager.tsx
@@ -36,27 +36,50 @@ interface PlaylistManagerProps {
   onPlaylistMove: (playlistName: string, targetFolderName: string | null) => void;
 }
 
-const getButtonStyles = (isSelected: boolean) => ({
+// Memoized button styles to prevent unnecessary re-renders
+const selectedButtonStyles = {
   width: "100%",
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
-  bg: isSelected ? "blue.800" : "transparent",
-  color: isSelected ? "white" : "gray.100",
-  fontWeight: isSelected ? "600" : "normal",
+  bg: "blue.800",
+  color: "white",
+  fontWeight: "600",
   borderRadius: "md",
   px: 4,
   py: 2,
   cursor: "pointer",
   transition: "all 0.2s",
   _hover: {
-    bg: isSelected ? "blue.600" : "whiteAlpha.200",
+    bg: "blue.600",
     transform: "translateX(2px)",
   },
   _active: {
-    bg: isSelected ? "blue.700" : "whiteAlpha.300",
+    bg: "blue.700",
   },
-});
+};
+
+const unselectedButtonStyles = {
+  width: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  bg: "transparent",
+  color: "gray.100",
+  fontWeight: "normal",
+  borderRadius: "md",
+  px: 4,
+  py: 2,
+  cursor: "pointer",
+  transition: "all 0.2s",
+  _hover: {
+    bg: "whiteAlpha.200",
+    transform: "translateX(2px)",
+  },
+  _active: {
+    bg: "whiteAlpha.300",
+  },
+};
 
 interface PlaylistItemProps {
   node: PlaylistNode;
@@ -68,7 +91,7 @@ interface PlaylistItemProps {
   allFolders: { name: string }[];
 }
 
-const PlaylistItem: React.FC<PlaylistItemProps> = ({
+const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
   node,
   level,
   selectedItem,
@@ -86,7 +109,7 @@ const PlaylistItem: React.FC<PlaylistItemProps> = ({
         <Flex align="center" gap={1}>
           <Button
             flex={1}
-            {...getButtonStyles(false)}
+            {...unselectedButtonStyles}
             onClick={() => setIsOpen(!isOpen)}
             ml={indent}
             pl={level > 0 ? 6 : 4} // Add extra padding for nested items
@@ -154,7 +177,7 @@ const PlaylistItem: React.FC<PlaylistItemProps> = ({
     <Flex align="center" gap={0}>
       <Button
         flex="1 1 auto"
-        {...getButtonStyles(selectedItem === node.name)}
+        {...(selectedItem === node.name ? selectedButtonStyles : unselectedButtonStyles)}
         onClick={() => onPlaylistSelect(node.name)}
         ml={indent}
         pl={level > 0 ? 6 : 4} // Add extra padding for nested items
@@ -237,7 +260,7 @@ const PlaylistItem: React.FC<PlaylistItemProps> = ({
       </Menu>
     </Flex>
   );
-};
+});
 
 export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
   playlists,
@@ -289,7 +312,7 @@ export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
     <Box>
       <VStack spacing={2} align="stretch" mb={4}>
         <Button
-          {...getButtonStyles(selectedItem === null)}
+          {...(selectedItem === null ? selectedButtonStyles : unselectedButtonStyles)}
           onClick={() => onPlaylistSelect(null)}
         >
           All Songs