From 84b464090c78a53edeaf2834a7f44ce0bcda79be Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 1 Dec 2025 17:52:49 -0800
Subject: [PATCH] optimize list content pages with sidebar to prevent extra
 rerender on config change

---
 .../albums/components/album-list-content.tsx  | 46 ++++++++++++-------
 .../songs/components/song-list-content.tsx    | 46 ++++++++++++-------
 2 files changed, 58 insertions(+), 34 deletions(-)

diff --git a/src/renderer/features/albums/components/album-list-content.tsx b/src/renderer/features/albums/components/album-list-content.tsx
index 014d28568..251f91b9c 100644
--- a/src/renderer/features/albums/components/album-list-content.tsx
+++ b/src/renderer/features/albums/components/album-list-content.tsx
@@ -34,29 +34,41 @@ const AlbumListPaginatedTable = lazy(() =>
     })),
 );
 
+const AlbumListFilters = () => {
+    return (
+        <ListWithSidebarContainer.SidebarPortal>
+            <ScrollArea>
+                <ListFilters itemType={LibraryItem.ALBUM} />
+            </ScrollArea>
+        </ListWithSidebarContainer.SidebarPortal>
+    );
+};
+
 export const AlbumListContent = () => {
+    return (
+        <>
+            <AlbumListFilters />
+            <AlbumListSuspenseContainer />
+        </>
+    );
+};
+
+const AlbumListSuspenseContainer = () => {
     const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.ALBUM);
 
     const { customFilters } = useListContext();
 
     return (
-        <>
-            <ListWithSidebarContainer.SidebarPortal>
-                <ScrollArea>
-                    <ListFilters itemType={LibraryItem.ALBUM} />
-                </ScrollArea>
-            </ListWithSidebarContainer.SidebarPortal>
-            <Suspense fallback={<Spinner container />}>
-                <AlbumListView
-                    display={display}
-                    grid={grid}
-                    itemsPerPage={itemsPerPage}
-                    overrideQuery={customFilters}
-                    pagination={pagination}
-                    table={table}
-                />
-            </Suspense>
-        </>
+        <Suspense fallback={<Spinner container />}>
+            <AlbumListView
+                display={display}
+                grid={grid}
+                itemsPerPage={itemsPerPage}
+                overrideQuery={customFilters}
+                pagination={pagination}
+                table={table}
+            />
+        </Suspense>
     );
 };
 
diff --git a/src/renderer/features/songs/components/song-list-content.tsx b/src/renderer/features/songs/components/song-list-content.tsx
index cf5e616fb..a6297341e 100644
--- a/src/renderer/features/songs/components/song-list-content.tsx
+++ b/src/renderer/features/songs/components/song-list-content.tsx
@@ -32,28 +32,40 @@ const SongListPaginatedTable = lazy(() =>
 );
 
 export const SongListContent = () => {
+    return (
+        <>
+            <SongListFilters />
+            <SongListSuspenseContainer />
+        </>
+    );
+};
+
+const SongListFilters = () => {
+    return (
+        <ListWithSidebarContainer.SidebarPortal>
+            <ScrollArea>
+                <ListFilters itemType={LibraryItem.SONG} />
+            </ScrollArea>
+        </ListWithSidebarContainer.SidebarPortal>
+    );
+};
+
+const SongListSuspenseContainer = () => {
     const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.SONG);
 
     const { customFilters } = useListContext();
 
     return (
-        <>
-            <ListWithSidebarContainer.SidebarPortal>
-                <ScrollArea>
-                    <ListFilters itemType={LibraryItem.SONG} />
-                </ScrollArea>
-            </ListWithSidebarContainer.SidebarPortal>
-            <Suspense fallback={<Spinner container />}>
-                <SongListView
-                    display={display}
-                    grid={grid}
-                    itemsPerPage={itemsPerPage}
-                    overrideQuery={customFilters}
-                    pagination={pagination}
-                    table={table}
-                />
-            </Suspense>
-        </>
+        <Suspense fallback={<Spinner container />}>
+            <SongListView
+                display={display}
+                grid={grid}
+                itemsPerPage={itemsPerPage}
+                overrideQuery={customFilters}
+                pagination={pagination}
+                table={table}
+            />
+        </Suspense>
     );
 };