implement react-virtuoso in board view

package.json

@@ -3,11 +3,11 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
-    "@capacitor/android": "3.6.0",
-    "@capacitor/core": "3.6.0",
     "@babel/core": "7.21.3",
     "@babel/plugin-syntax-flow": "7.18.6",
     "@babel/plugin-transform-react-jsx": "7.21.0",
+    "@capacitor/android": "3.6.0",
+    "@capacitor/core": "3.6.0",
     "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#97b538693972e26f7c0f0f13ec6afab03b0e2e57",
     "@testing-library/dom": "9.0.1",
     "@testing-library/jest-dom": "5.14.1",
@@ -29,7 +29,6 @@
     "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",
@@ -37,6 +36,7 @@
     "react-scripts": "5.0.1",
     "react-toastify": "9.1.1",
     "react-tooltip": "5.10.0",
+    "react-virtuoso": "^4.3.2",
     "rehype-sanitize": "5.0.1",
     "remark-breaks": "3.0.2",
     "styled-components": "5.3.9",
@@ -115,15 +115,15 @@
     }
   },
   "devDependencies": {
+    "@capacitor/cli": "3.6.0",
     "concurrently": "8.0.1",
+    "cordova-res": "0.15.4",
     "cross-env": "7.0.3",
     "decompress": "4.2.1",
     "electron": "19.0.1",
     "electron-builder": "23.0.9",
     "typescript": "5.0.2",
-    "wait-on": "7.0.1",
-    "cordova-res": "0.15.4",
-    "@capacitor/cli": "3.6.0"
+    "wait-on": "7.0.1"
   },
   "resolutions": {
     "styled-components": "^5"

src/App.js

@@ -31,6 +31,7 @@ const GlobalStyle = createGlobalStyle`
   }
   
   .tooltip {
+    z-index: 999;
     border-radius: 0;
     max-width: 40%;
     font-size: 11px;

src/components/views/Board.jsx

@@ -1,8 +1,8 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
-import InfiniteScroll from 'react-infinite-scroller';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
+import { Virtuoso } from 'react-virtuoso';
 import { useAccount, useAccountComments, useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
 import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
 import { debounce } from 'lodash';
@@ -458,16 +458,14 @@ const Board = () => {
             {feed.length < 1 ? (
               <PostLoader />
             ) : (
-              <InfiniteScroll
-                pageStart={0}
-                loadMore={tryLoadMore}
-                hasMore={hasMore}
-              >
-                {selectedFeed.map((thread, index) => {
-                const { displayedReplies, omittedCount } = filteredRepliesByThread[thread.cid] || {};
-                const commentMediaInfo = getCommentMediaInfo(thread);
-                const fallbackImgUrl = "/assets/filedeleted-res.gif";
-                return (
+              <Virtuoso
+                increaseViewportBy={2000}
+                data={selectedFeed}
+                itemContent={(index, thread) => {
+                  const { displayedReplies, omittedCount } = filteredRepliesByThread[thread.cid] || {};
+                  const commentMediaInfo = getCommentMediaInfo(thread);
+                  const fallbackImgUrl = "/assets/filedeleted-res.gif";
+                  return (
                 <Fragment key={`fr-${index}`}>
                   <div key={`t-${index}`} className="thread">
                     <div key={`c-${index}`} className="op-container">
@@ -1039,8 +1037,12 @@ const Board = () => {
                     )})}
                   </div>
                 </Fragment>
-                )})}
-              </InfiniteScroll>
+                  );
+                }}
+                endReached={tryLoadMore}
+                useWindowScroll={true}
+                components={{ Footer: hasMore ? () => <PostLoader /> : null }}
+              />
             )}
           </div>
         </BoardForm>

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.5.8, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.0.0, 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,13 +12177,6 @@ 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"
@@ -12332,6 +12325,11 @@ react-tooltip@5.10.0:
     "@floating-ui/dom" "1.2.3"
     classnames "^2.3.2"
 
+react-virtuoso@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-4.3.2.tgz#91d4926c67f635cf7efc2dea29e7cd6de83575d1"
+  integrity sha512-n51V4fMk36VM6NapfaMbfs4w/IaVodp5asp+rtzlvz0yurG6uVrqA040ke43gpYtoOL6j6TxeXWo4b6GpO9N0A==
+
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"