Implement list virtualization for Home feed

[Copilot]

Home screen rendered all posts synchronously (capped at 500), causing expensive renders on load.

Changes

• Feed component: Replaced full list rendering with @tanstack/react-virtual (v3.13.12)

  • Virtualizer configured for window-level scrolling with dynamic height measurement
  • Renders only visible items + 5-item overscan buffer
  • Preserves existing scroll position restoration and memoization

• Manager: Removed 500-post limit from onPostsChanged, getReplies, and getAllReplies

Implementation

const virtualizer = useVirtualizer({
  count: posts.length,
  getScrollElement: () => window.document.documentElement,
  estimateSize: () => 200,
  overscan: 5,
});

const items = virtualizer.getVirtualItems();

// Render only visible items with absolute positioning
items.map((virtualItem) => {
  const post = posts[virtualItem.index];
  return (
    <div
      key={post.id}
      ref={virtualizer.measureElement}
      style={{
        position: "absolute",
        transform: `translateY(${virtualItem.start}px)`,
      }}
    >
      <PostItem post={post} />
    </div>
  );
});

Screenshots

Feed with 100+ posts (scrolled):

Constant ~10-15 DOM nodes regardless of total post count.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>add list virtualization instead of showing only X last posts</issue_title>
<issue_description>currently loading the Home screen is really expensive, all posts are rendered so currently we limit the list to the last 500 posts,
some list virtualization is needed to lazily render items/posts</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes add list virtualization instead of showing only X last posts #16

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.