vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-09 20:29:36 +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 = () => { export const AlbumListContent = () => {
return (
<>
<AlbumListFilters />
<AlbumListSuspenseContainer />
</>
);
};
const AlbumListSuspenseContainer = () => {
const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.ALBUM); const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.ALBUM);
const { customFilters } = useListContext(); const { customFilters } = useListContext();
return ( return (
<> <Suspense fallback={<Spinner container />}>
<ListWithSidebarContainer.SidebarPortal> <AlbumListView
<ScrollArea> display={display}
<ListFilters itemType={LibraryItem.ALBUM} /> grid={grid}
</ScrollArea> itemsPerPage={itemsPerPage}
</ListWithSidebarContainer.SidebarPortal> overrideQuery={customFilters}
<Suspense fallback={<Spinner container />}> pagination={pagination}
<AlbumListView table={table}
display={display} />
grid={grid} </Suspense>
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 = () => { 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 { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.SONG);
const { customFilters } = useListContext(); const { customFilters } = useListContext();
return ( return (
<> <Suspense fallback={<Spinner container />}>
<ListWithSidebarContainer.SidebarPortal> <SongListView
<ScrollArea> display={display}
<ListFilters itemType={LibraryItem.SONG} /> grid={grid}
</ScrollArea> itemsPerPage={itemsPerPage}
</ListWithSidebarContainer.SidebarPortal> overrideQuery={customFilters}
<Suspense fallback={<Spinner container />}> pagination={pagination}
<SongListView table={table}
display={display} />
grid={grid} </Suspense>
itemsPerPage={itemsPerPage}
overrideQuery={customFilters}
pagination={pagination}
table={table}
/>
</Suspense>
</>
); );
}; };