implement react-virtuoso in catalog view

src/components/styled/Catalog.styled.jsx

@@ -1,9 +1,19 @@
 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;
@@ -16,6 +26,7 @@ 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 InfiniteScroll from 'react-infinite-scroller';
+import { VirtuosoGrid } from 'react-virtuoso';
 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 } from '../styled/Catalog.styled';
+import { Threads, GridContainer } 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 />
           ) : (
-            <InfiniteScroll
-              pageStart={0}
-              loadMore={tryLoadMore}
-              hasMore={hasMore}
-            >
-              {feed.map((thread, index) => {
+            <VirtuosoGrid
+              style={{width: "100%", height: "100%"}}
+              data={feed}
+              increaseViewportBy={3000}
+              itemContent={(index) => {
+                const thread = feed[index];
                 const commentMediaInfo = getCommentMediaInfo(thread);
                 const fallbackImgUrl = "/assets/filedeleted-res.gif";
                 return (
@@ -429,8 +429,15 @@ const Catalog = () => {
                       </div>
                     </div>
                   </Link>
-                )})}
-            </InfiniteScroll>
+                );
+              }}
+              endReached={tryLoadMore}
+              useWindowScroll={true}
+              components={{
+                List: GridContainer,
+                Footer: hasMore ? () => <CatalogLoader /> : null,
+              }}
+            />
           )}
         </Threads>
         <Footer selectedStyle={selectedStyle}>