vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
jeffvli
2025-12-01 17:52:49 -08:00
parent 7db0b59895
commit 84b464090c
2 changed files with 58 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/albums/components/album-list-content.tsx
+29 -17
View File
@@ -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>
);
};
src/renderer/features/songs/components/song-list-content.tsx
+29 -17
View File
@@ -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>
);
};