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

@@ -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}

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}`,
     };
 };

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')

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={() => {}}

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}