Force re-render of virtuoso grid on filter changes

Workaround for https://github.com/Suwayomi/Suwayomi-WebUI/issues/933
This commit is contained in:
schroda
2025-05-17 19:53:56 +02:00
parent 08df61737e
commit 4a1eb6f824
5 changed files with 19 additions and 2 deletions

View File

@@ -94,7 +94,11 @@ export function Library() {
refetch: refetchCategoryMangas,
} = requestManager.useGetCategoryMangas(activeTab?.id, { skip: !activeTab, notifyOnNetworkStatusChange: true });
const categoryMangas = categoryMangaResponse?.mangas.nodes ?? [];
const { visibleMangas: mangas, showFilteredOutMessage } = useGetVisibleLibraryMangas(categoryMangas, activeTab);
const {
visibleMangas: mangas,
showFilteredOutMessage,
filterKey,
} = useGetVisibleLibraryMangas(categoryMangas, activeTab);
const retryFetchCategoryMangas = useCallback(
() => refetchCategoryMangas().catch(defaultPromiseErrorHandler('Library::refetchCategoryMangas')),
@@ -230,6 +234,8 @@ export function Library() {
return (
<>
<LibraryMangaGrid
// the key needs to include filters and query to force a re-render of the virtuoso grid to prevent https://github.com/petyosi/react-virtuoso/issues/1242
key={filterKey}
mangas={mangas}
message={mangaError ? t('manga.error.label.request_failure') : t('library.error.label.empty')}
messageExtra={mangaError?.message}
@@ -266,6 +272,8 @@ export function Library() {
<TabPanel key={tab.order} index={tab.order} currentIndex={activeTab.order}>
{tab === activeTab && (
<LibraryMangaGrid
// the key needs to include filters and query to force a re-render of the virtuoso grid to prevent https://github.com/petyosi/react-virtuoso/issues/1242
key={filterKey}
mangas={mangas}
message={
mangaError ? t('manga.error.label.request_failure') : t('library.error.label.empty')