Test using react-virtuoso to render the feed because it slows down the app when there's too many cards

After you scroll a few pages, it becomes very slow to open a post. This is probably due to having to render too many cards. A potential way to deal with this is to use https://www.npmjs.com/package/react-virtuoso https://virtuoso.dev/ which only loads the cards in view, not all of them.

NOTE: this should only be a test to see if it improves the speed, if it doesn't imrpove the speed, it can be changed back.

I tested the library using this code and it seemed to work well and do everything we need:

import React, {useState} from 'react'
import ReactDOM from 'react-dom'
import {Virtuoso} from 'react-virtuoso'
import {useFeed} from '@plebbit/plebbit-react-hooks'

const subplebbitAddresses = ['12D3KooWG3XbzoVyAE6Y9vHZKF64Yuuu4TjdgQKedk14iYmTEPWu', 'plebshelpingplebs.eth', 'business-and-finance.eth']

const Post = ({index, post}) => {
  const content = `${post.title} ${post.content} ${post.link} ${post.timestamp} ${post.author.address}`.slice(0, 2000)
  return (
    <div style={{maxHeight: 600, wordBreak: 'break-all', padding: 16}}>
      {content}
    </div>
  )
}

const App = () => {
  const {feed, loadMore, hasMore} = useFeed({subplebbitAddresses})

  let Loading
  if (hasMore) {
    Loading = () => <div>Loading...</div>
  }

  return (
    <div style={{height: '100vh'}}>
      <Virtuoso 
        data={feed}
        style={{height: '100%', maxWidth: 600}} 
        itemContent={(index, post) => <Post index={index} post={post}/>}
        endReached={loadMore}
        useWindowScroll={true}
        components={{Footer: Loading}}
      />
    </div>
  )
};

export default App

A potential option to test would be increaseViewportBy https://virtuoso.dev/virtuoso-api-reference/ maybe it can improve scrolling performance.

Screenshot 2023-04-21 at 04-36-13 Virtuoso API Reference React Virtuoso

plebbit / plebbit-react

Test using react-virtuoso to render the feed because it slows down the app when there's too many cards #255