From 4332a9ea3a7e7f94333b8d1ae5551727983a1a0c Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 29 Mar 2023 14:27:25 -0700
Subject: [PATCH] Improve sidebar playlist resize performance

---
 .../components/sidebar-playlist-list.tsx       | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
index 09eedb51..f2c9c6d6 100644
--- a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
+++ b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
@@ -1,5 +1,6 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Flex, Group } from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
 import { RiAddBoxFill, RiAddCircleFill, RiPlayFill } from 'react-icons/ri';
 import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';
@@ -110,6 +111,13 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
   const { isScrollbarHidden, hideScrollbarElementProps } = useHideScrollbar(0);
   const handlePlayQueueAdd = usePlayQueueAdd();
 
+  const [rect, setRect] = useState({
+    height: 0,
+    width: 0,
+  });
+
+  const [debounced] = useDebouncedValue(rect, 25);
+
   const handlePlayPlaylist = useCallback(
     (id: string, play: Play) => {
       handlePlayQueueAdd?.({
@@ -135,16 +143,16 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
       h="100%"
       {...hideScrollbarElementProps}
     >
-      <AutoSizer>
-        {({ height, width }) => (
+      <AutoSizer onResize={(e) => setRect(e)}>
+        {() => (
           <FixedSizeList
             className={isScrollbarHidden ? 'hide-scrollbar overlay-scrollbar' : 'overlay-scrollbar'}
-            height={height}
+            height={debounced.height}
             itemCount={data?.items?.length || 0}
             itemData={memoizedItemData}
             itemSize={25}
             overscanCount={20}
-            width={width}
+            width={debounced.width}
           >
             {PlaylistRow}
           </FixedSizeList>