Implement list virtualization for Home feed

package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@fontsource/jersey-10": "^5.2.6",
+    "@tanstack/react-virtual": "^3.13.12",
     "dexie": "^4.0.11",
     "html-to-image": "^1.11.13",
     "lodash": "^4.17.21",

src/components/Feed.tsx

@@ -1,4 +1,5 @@
-import { useMemo, useEffect } from "react";
+import { useMemo, useEffect, useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
 
 import { _ } from "~/lib/i18n";
 import { GRAY_COLOR } from "~/constants";
@@ -10,12 +11,14 @@ interface Props {
 }
 
 export default function Feed({ posts }: Props) {
-  const items = posts.map((p) =>
-    useMemo(
-      () => <PostItem key={p.id} post={p} />,
-      [p.id, p.likes, p.liked, p.replies],
-    ),
-  );
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const virtualizer = useVirtualizer({
+    count: posts.length,
+    getScrollElement: () => window.document.documentElement,
+    estimateSize: () => 200,
+    overscan: 5,
+  });
 
   useEffect(() => {
     const pos = sessionStorage.feedScrollPos;
@@ -25,11 +28,11 @@ export default function Feed({ posts }: Props) {
     }
   }, []);
 
-  return (
-    <div>
-      {posts.length ? (
-        items
-      ) : (
+  const items = virtualizer.getVirtualItems();
+
+  if (!posts.length) {
+    return (
+      <div>
         <p
           style={{
             textAlign: "center",
@@ -41,7 +44,44 @@ export default function Feed({ posts }: Props) {
         >
           {_("No posts yet")}
         </p>
-      )}
+      </div>
+    );
+  }
+
+  return (
+    <div ref={parentRef}>
+      <div
+        style={{
+          height: `${virtualizer.getTotalSize()}px`,
+          width: "100%",
+          position: "relative",
+        }}
+      >
+        {items.map((virtualItem) => {
+          const post = posts[virtualItem.index];
+          return (
+            <div
+              key={post.id}
+              data-index={virtualItem.index}
+              ref={virtualizer.measureElement}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                transform: `translateY(${virtualItem.start}px)`,
+              }}
+            >
+              {useMemo(
+                () => (
+                  <PostItem post={post} />
+                ),
+                [post.id, post.likes, post.liked, post.replies],
+              )}
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 }

src/lib/manager.ts

@@ -42,7 +42,7 @@ export class Manager {
     await db.posts.where("active").below(oldDate).delete();
 
     const onPostsChanged = throttle(async () => {
-      setPosts(await db.posts.orderBy("active").reverse().limit(500).toArray());
+      setPosts(await db.posts.orderBy("active").reverse().toArray());
     }, 500);
     this.queue.push({
       payload: {
@@ -120,13 +120,11 @@ export class Manager {
   }
 
   async getReplies(postId: string): Promise<Reply[]> {
-    return (await db.replies.where({ postId }).reverse().sortBy("date")).slice(
-      -500,
-    );
+    return await db.replies.where({ postId }).reverse().sortBy("date");
   }
 
   async getAllReplies(): Promise<Reply[]> {
-    return await db.replies.orderBy("date").reverse().limit(500).toArray();
+    return await db.replies.orderBy("date").reverse().toArray();
   }
 
   private async processUpdate(update: ReceivedStatusUpdate<Payload>) {