vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-06-24 04:47:57 +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
+19 -7
View File
@@ -34,18 +34,31 @@ const AlbumListPaginatedTable = lazy(() =>
})),
);
export const AlbumListContent = () => {
const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.ALBUM);
const { customFilters } = useListContext();
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 (
<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
+17 -5
View File
@@ -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>
</>
);
};