switch back to InfiniteScroll in Catalog view

package.json

@@ -29,6 +29,7 @@
     "react-dom": "18.2.0",
     "react-draggable": "4.4.5",
     "react-helmet-async": "1.3.0",
+    "react-infinite-scroller": "^1.2.6",
     "react-is": "18.2.0",
     "react-markdown": "8.0.6",
     "react-modal": "3.16.1",

src/components/styled/Catalog.styled.jsx

@@ -1,19 +1,9 @@
 import styled from 'styled-components';
 
-export const GridContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  width: 100%;
-`;
-
 export const Threads = styled.div`
   padding: 20px 0;
   text-align: center;
   margin: 0;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
 
   .thread {
     width: 180px;
@@ -26,7 +16,6 @@ export const Threads = styled.div`
     margin-bottom: 20px;
     padding: 5px 0 3px;
     position: relative;
-    overflow: hidden;
   }
 
   video, audio, img {

src/components/views/Catalog.jsx

@@ -1,12 +1,12 @@
 import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
-import { VirtuosoGrid } from 'react-virtuoso';
+import InfiniteScroll from 'react-infinite-scroller';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from '../styled/Board.styled';
-import { Threads, GridContainer } from '../styled/Catalog.styled';
+import { Threads } from '../styled/Catalog.styled';
 import { TopBar, Footer } from '../styled/Thread.styled';
 import CatalogLoader from '../CatalogLoader';
 import ImageBanner from '../ImageBanner';
@@ -372,12 +372,12 @@ const Catalog = () => {
           {feed.length < 1 ? (
             <CatalogLoader />
           ) : (
-            <VirtuosoGrid
+            <InfiniteScroll
-              style={{width: "100%", height: "100%"}}
+              pageStart={0}
-              data={feed}
+              loadMore={tryLoadMore}
-              increaseViewportBy={3000}
+              hasMore={hasMore}
-              itemContent={(index) => {
+            >
-                const thread = feed[index];
+              {feed.map((thread, index) => {
                 const commentMediaInfo = getCommentMediaInfo(thread);
                 const fallbackImgUrl = "/assets/filedeleted-res.gif";
                 return (
@@ -429,15 +429,8 @@ const Catalog = () => {
                       </div>
                     </div>
                   </Link>
-                );
+                )})}
-              }}
+            </InfiniteScroll>
-              endReached={tryLoadMore}
-              useWindowScroll={true}
-              components={{
-                List: GridContainer,
-                Footer: hasMore ? () => <CatalogLoader /> : null,
-              }}
-            />
           )}
         </Threads>
         <Footer selectedStyle={selectedStyle}>

yarn.lock

@@ -11931,7 +11931,7 @@ prompts@^2.0.1, prompts@^2.3.2, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.0.0, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -12177,6 +12177,13 @@ react-helmet-async@1.3.0:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
+react-infinite-scroller@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/react-infinite-scroller/-/react-infinite-scroller-1.2.6.tgz#8b80233226dc753a597a0eb52621247f49b15f18"
+  integrity sha512-mGdMyOD00YArJ1S1F3TVU9y4fGSfVVl6p5gh/Vt4u99CJOptfVu/q5V/Wlle72TMgYlBwIhbxK5wF0C/R33PXQ==
+  dependencies:
+    prop-types "^15.5.8"
+
 react-is@18.2.0, react-is@^18.0.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"