optimize list content pages with sidebar to prevent extra rerender on config change

src/renderer/features/albums/components/album-list-content.tsx

@@ -34,18 +34,31 @@ const AlbumListPaginatedTable = lazy(() =>
     })),
 );
 
-export const AlbumListContent = () => {
+const AlbumListFilters = () => {
-    const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.ALBUM);
-
-    const { customFilters } = useListContext();
-
     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 (
         <Suspense fallback={<Spinner container />}>
             <AlbumListView
                 display={display}
@@ -56,7 +69,6 @@ export const AlbumListContent = () => {
                 table={table}
             />
         </Suspense>
-        </>
     );
 };
 

src/renderer/features/songs/components/song-list-content.tsx

@@ -32,17 +32,30 @@ const SongListPaginatedTable = lazy(() =>
 );
 
 export const SongListContent = () => {
-    const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.SONG);
-
-    const { customFilters } = useListContext();
-
     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 (
         <Suspense fallback={<Spinner container />}>
             <SongListView
                 display={display}
@@ -53,7 +66,6 @@ export const SongListContent = () => {
                 table={table}
             />
         </Suspense>
-        </>
     );
 };