feed: use virtuoso for virtualising feed

Author: Roshanjossey

package.json

@@ -33,6 +33,7 @@
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-relay": "^13.0.2",
+    "react-virtuoso": "^2.18.0",
     "relay-nextjs": "^0.6.0",
     "relay-runtime": "^13.0.2",
     "simple-oauth2": "^4.3.0",

src/components/feed/Feed.tsx

@@ -1,4 +1,6 @@
+import { useEffect, useState } from 'react'
 import { graphql, usePaginationFragment } from 'react-relay'
+import { Virtuoso } from 'react-virtuoso'
 import { FeedsQuery$key } from '../../queries/__generated__/FeedsQuery.graphql'
 import StoryPreview from './StoryPreview'
 
@@ -7,12 +9,12 @@ type FeedProps = {
 }
 
 const Feed = ({ root }: FeedProps) => {
-  const { data } = usePaginationFragment(
+  const { data, loadNext } = usePaginationFragment(
     graphql`
       fragment FeedsQuery on Query
       @refetchable(queryName: "FeedsRoot_Query")
       @argumentDefinitions(
-        count: { type: "Int", defaultValue: 10 }
+        count: { type: "Int", defaultValue: 4 }
         cursor: { type: "String" }
       ) {
         feeds(first: $count, after: $cursor)
@@ -31,9 +33,25 @@ const Feed = ({ root }: FeedProps) => {
 
   return (
     <>
-      {data.feeds.edges.map(
-        (edge) => edge && <StoryPreview story={edge?.node} key={edge.node.id} />
-      )}
+      <Virtuoso
+        className="min-h-screen virtuoso-container"
+        data={data.feeds.edges}
+        endReached={loadNext}
+        overscan={200}
+        itemContent={(index, edge) => {
+          return (
+            edge?.node && <StoryPreview story={edge?.node} key={edge.node.id} />
+          )
+        }}
+      />
+      <style jsx>
+        {`
+          // hide scrollbar
+          -webkit-scrollbar {
+            display: none;
+          }
+        `}
+      </style>
     </>
   )
 }

src/pages/index.tsx

@@ -43,13 +43,9 @@ const Home = ({
       sidebarContentLeft={leftSidebar}
       sidebarContentRight={<div>Promoted</div>}
     >
-      <Card>Posts</Card>
       {query.viewer && (
         <>
           <Feed root={query} />
-          <IssuesFromLastRepo user={query.viewer} />
-          <IssuesFromRecentRepos user={query.viewer} />
-          <RelevantIssues user={query.viewer} />
         </>
       )}
     </Layout>

src/queries/__generated__/FeedsQuery.graphql.ts

@@ -451,6 +451,18 @@
     "@typescript-eslint/types" "5.28.0"
     eslint-visitor-keys "^3.3.0"
 
+"@virtuoso.dev/react-urx@^0.2.12":
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/@virtuoso.dev/react-urx/-/react-urx-0.2.13.tgz#e2cfc42d259d2a002695e7517d34cb97b64ee9c4"
+  integrity sha512-MY0ugBDjFb5Xt8v2HY7MKcRGqw/3gTpMlLXId2EwQvYJoC8sP7nnXjAxcBtTB50KTZhO0SbzsFimaZ7pSdApwA==
+  dependencies:
+    "@virtuoso.dev/urx" "^0.2.13"
+
+"@virtuoso.dev/urx@^0.2.12", "@virtuoso.dev/urx@^0.2.13":
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/@virtuoso.dev/urx/-/urx-0.2.13.tgz#a65e7e8d923cb03397ac876bfdd45c7f71c8edf1"
+  integrity sha512-iirJNv92A1ZWxoOHHDYW/1KPoi83939o83iUBQHIim0i3tMeSKEh+bxhJdTHQ86Mr4uXx9xGUTq69cp52ZP8Xw==
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
@@ -2621,6 +2633,14 @@ react-relay@^13.0.2:
     nullthrows "^1.1.1"
     relay-runtime "13.0.2"
 
+react-virtuoso@^2.18.0:
+  version "2.18.0"
+  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-2.18.0.tgz#42f8a7cb632aaf0bb2812bbbd4b5f2583d3d53ec"
+  integrity sha512-BxMW9as2dPOP4YFkry/oNjQMEn3cOgEjHLb7Fg8oubOgRAfiukp1Co41QFD9ZMXZBNBZNTI2E5BwC5pol31mTg==
+  dependencies:
+    "@virtuoso.dev/react-urx" "^0.2.12"
+    "@virtuoso.dev/urx" "^0.2.12"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"