From 4a1eb6f8243f4a3a471c67a5260e9f7f487b9d9a Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sat, 17 May 2025 19:53:56 +0200
Subject: [PATCH] Force re-render of virtuoso grid on filter changes

Workaround for https://github.com/Suwayomi/Suwayomi-WebUI/issues/933
---
 src/modules/global-search/screens/SearchAll.tsx        |  2 ++
 .../library/hooks/useGetVisibleLibraryMangas.ts        |  2 ++
 src/modules/library/screens/Library.tsx                | 10 +++++++++-
 src/modules/library/screens/LibraryDuplicates.tsx      |  2 ++
 src/modules/source/screens/SourceMangas.tsx            |  5 ++++-
 5 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/modules/global-search/screens/SearchAll.tsx b/src/modules/global-search/screens/SearchAll.tsx
index 1b77baef..097d69ce 100644
--- a/src/modules/global-search/screens/SearchAll.tsx
+++ b/src/modules/global-search/screens/SearchAll.tsx
@@ -168,6 +168,8 @@ const SourceSearchPreview = React.memo(
                     />
                 ) : (
                     <BaseMangaGrid
+                        // 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={searchString}
                         gridWrapperProps={{ sx: { px: 0 } }}
                         mangas={mangas}
                         isLoading={isLoading}
diff --git a/src/modules/library/hooks/useGetVisibleLibraryMangas.ts b/src/modules/library/hooks/useGetVisibleLibraryMangas.ts
index 99979ef1..ec621a3d 100644
--- a/src/modules/library/hooks/useGetVisibleLibraryMangas.ts
+++ b/src/modules/library/hooks/useGetVisibleLibraryMangas.ts
@@ -211,6 +211,7 @@ export const useGetVisibleLibraryMangas = <Manga extends MangaIdInfo & TMangasFi
 ): {
     visibleMangas: Manga[];
     showFilteredOutMessage: boolean;
+    filterKey: string;
 } => {
     const [query] = useQueryParam('query', StringParam);
     const options = useGetCategoryMetadata(category ?? DEFAULT_CATEGORY);
@@ -265,5 +266,6 @@ export const useGetVisibleLibraryMangas = <Manga extends MangaIdInfo & TMangasFi
     return {
         visibleMangas: sortedMangas,
         showFilteredOutMessage,
+        filterKey: `${JSON.stringify(options)}${settings.ignoreFilters}`,
     };
 };
diff --git a/src/modules/library/screens/Library.tsx b/src/modules/library/screens/Library.tsx
index f9c61e5b..958a5cdd 100644
--- a/src/modules/library/screens/Library.tsx
+++ b/src/modules/library/screens/Library.tsx
@@ -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')
diff --git a/src/modules/library/screens/LibraryDuplicates.tsx b/src/modules/library/screens/LibraryDuplicates.tsx
index 31783a79..353bdb59 100644
--- a/src/modules/library/screens/LibraryDuplicates.tsx
+++ b/src/modules/library/screens/LibraryDuplicates.tsx
@@ -171,6 +171,8 @@ export const LibraryDuplicates = () => {
                 </Typography>
             </StyledGroupHeader>
             <BaseMangaGrid
+                // 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={checkAlternativeTitles.toString()}
                 mangas={mangasByTitle[title] as IMangaGridProps['mangas']}
                 hasNextPage={false}
                 loadMore={() => {}}
diff --git a/src/modules/source/screens/SourceMangas.tsx b/src/modules/source/screens/SourceMangas.tsx
index fdc12197..02e39d5e 100644
--- a/src/modules/source/screens/SourceMangas.tsx
+++ b/src/modules/source/screens/SourceMangas.tsx
@@ -277,6 +277,8 @@ export function SourceMangas() {
         setLocationContentType(newContentType);
     };
 
+    const gridKey = `${contentType}${JSON.stringify(filtersToApply)}${query}`;
+
     const [
         loadPage,
         { data, error, isLoading: loading, size: lastPageNum, abortRequest, filteredOutAllItemsOfFetchedPage },
@@ -453,7 +455,8 @@ export function SourceMangas() {
 
             {(isLoading || !error || (!!error && !!mangas.length)) && (
                 <BaseMangaGrid
-                    key={contentType}
+                    // 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={gridKey}
                     gridWrapperProps={{ sx: { px: 1, pb: 1 } }}
                     mangas={mangas}
                     hasNextPage={hasNextPage}