diff --git a/src/components/styled/Catalog.styled.jsx b/src/components/styled/Catalog.styled.jsx
index d132658e..a611a4fe 100644
--- a/src/components/styled/Catalog.styled.jsx
+++ b/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 {
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index dc9ce1f6..06b58d9c 100644
--- a/src/components/views/Catalog.jsx
+++ b/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 ? (
) : (
-
- {feed.map((thread, index) => {
+ {
+ const thread = feed[index];
const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "/assets/filedeleted-res.gif";
return (
@@ -429,8 +429,15 @@ const Catalog = () => {
- )})}
-
+ );
+ }}
+ endReached={tryLoadMore}
+ useWindowScroll={true}
+ components={{
+ List: GridContainer,
+ Footer: hasMore ? () => : null,
+ }}
+ />
)}