Posts feed: virtualize list view

[ncarazon]

Summary

Extends #4928 virtualization to the list view of the main feed.

Related to #4937

Implemented changes:

• Replaced the non-virtualized 1-column Masonry branch in FeedLayoutView with VirtualizedMasonry (columns={1}), reusing the same @tanstack/react-virtual window-virtualizer already used by the grid view.
• Added list-mode size estimators (estimateFeedItemSizeList for regular/notebook/project cards and estimateFeedItemSizeCompact for compact search results); actual heights are corrected on first paint via the virtualizer's measured lane-assignment mode.

Summary by CodeRabbit

• Improvements
  • Updated the feed’s list view to render more smoothly with virtualization.
  • Added better item sizing for standard list browsing and compact search results.
  • Improved spacing and loading performance in non-grid feed layouts.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 887b6f39-eaca-411f-a1e9-101d81b789fe

📥 Commits

Reviewing files that changed from the base of the PR and between bd69086 and 58e7038.

📒 Files selected for processing (1)

• front_end/src/components/posts_feed/paginated_feed.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• front_end/src/components/posts_feed/paginated_feed.tsx

---

📝 Walkthrough

Walkthrough

The paginated feed list path now renders through VirtualizedMasonry in a single column. List mode uses list-specific gap and overscan constants, and item sizing now switches between standard and compact-search estimates.

Changes

Paginated feed list virtualization

Layer / File(s)	Summary
Virtualization setup front_end/src/components/posts_feed/paginated_feed.tsx	Moves useMediaValues to its own import, adds list virtualization spacing constants, and defines separate size estimators for the normal list and compact search mode.
List rendering switch front_end/src/components/posts_feed/paginated_feed.tsx	The non-grid feed branch renders VirtualizedMasonry with one column, list-specific spacing, and the size estimator chosen from compactSearchMode.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

• Further FE optimization of post feeds #4937: Both changes target paginated_feed.tsx list-feed virtualization, so the issue aligns with the updated list rendering path.

Possibly related PRs

• Metaculus/metaculus#4930: Both PRs modify front_end/src/components/posts_feed/paginated_feed.tsx to move the posts feed toward VirtualizedMasonry and list virtualization.

Suggested reviewers

• cemreinanc
• hlbmtc

Poem

🐇 I hop through a virtualized lane,
with list-mode gaps that make room for rain.
Compact search keeps my ears just right,
and Masonry glides through the feed tonight.
Thump thump — the posts scroll soft and light.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: virtualizing the posts feed list view.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/list-view-virtualization

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Caution

Failed to replace (edit) comment. This is likely due to insufficient permissions or the comment being deleted.

Error details

{"name":"HttpError","status":500,"request":{"method":"PATCH","url":"https://api.github.com/repos/Metaculus/metaculus/issues/comments/4802289504","headers":{"accept":"application/vnd.github.v3+json","user-agent":"octokit.js/0.0.0-development octokit-core.js/7.0.6 Node.js/24","authorization":"token [REDACTED]","content-type":"application/json; charset=utf-8"},"body":{"body":"<!-- This is an auto-generated comment: summarize by coderabbit.ai -->\n<!-- review_stack_entry_start -->\n\n[![Review Change Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/Metaculus/metaculus/pull/4943?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)\n\n<!-- review_stack_entry_end -->\n<!-- This is an auto-generated comment: review in progress by coderabbit.ai -->\n\n> [!NOTE]\n> Currently processing new changes in this PR. This may take a few minutes, please wait...\n> \n> <details>\n> <summary>⚙️ Run configuration</summary>\n> \n> **Configuration used**: Path: .coderabbit.yaml\n> \n> **Review profile**: CHILL\n> \n> **Plan**: Pro\n> \n> **Run ID**: `3f2edacc-b665-44bb-ac05-a91e082d0b2b`\n> \n> </details>\n> \n> <details>\n> <summary>📥 Commits</summary>\n> \n> Reviewing files that changed from the base of the PR and between 41dff09e60f4f79011a857eedf4ac5023a7c7774 and e9facae49e1fc704df4a950e1269db89b3f3fa0d.\n> \n> </details>\n> \n> <details>\n> <summary>📒 Files selected for processing (1)</summary>\n> \n> * `front_end/src/components/posts_feed/paginated_feed.tsx`\n> \n> </details>\n> \n> ```ascii\n>  __________________________________\n> < Pretty fly for a code review AI. >\n>  ----------------------------------\n>   \\\n>    \\   \\\n>         \\ /\\\n>         ( )\n>       .( o ).\n> ```\n\n<!-- end of auto-generated comment: review in progress by coderabbit.ai -->\n\n<!-- finishing_touch_checkbox_start -->\n\n<details>\n<summary>✨ Finishing Touches</summary>\n\n<details>\n<summary>📝 Generate docstrings</summary>\n\n- [ ] <!-- {\"checkboxId\": \"7962f53c-55bc-4827-bfbf-6a18da830691\"} --> Create stacked PR\n- [ ] <!-- {\"checkboxId\": \"3e1879ae-f29b-4d0d-8e06-d12b7ba33d98\"} --> Commit on current branch\n\n</details>\n<details>\n<summary>🧪 Generate unit tests (beta)</summary>\n\n- [ ] <!-- {\"checkboxId\": \"f47ac10b-58cc-4372-a567-0e02b2c3d479\", \"radioGroupId\": \"utg-output-choice-group-4802289504\"} -->   Create PR with unit tests\n- [ ] <!-- {\"checkboxId\": \"6ba7b810-9dad-11d1-80b4-00c04fd430c8\", \"radioGroupId\": \"utg-output-choice-group-4802289504\"} -->   Commit unit tests in branch `feat/list-view-virtualization`\n\n</details>\n\n</details>\n\n<!-- finishing_touch_checkbox_end -->\n<!-- tips_start -->\n\n---\n\nThanks for using [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=Metaculus/metaculus&utm_content=4943)! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.\n\n<details>\n<summary>❤️ Share</summary>\n\n- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)\n- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)\n- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)\n- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)\n\n</details>\n\n\n<sub>Comment `@coderabbitai help` to get the list of available commands.</sub>\n\n<!-- tips_end -->"},"request":{"retryCount":3,"signal":{},"retries":3,"retryAfter":16}}}

[github-actions]

🚀 Preview Environment

Your preview environment is ready!

Resource	Details
🌐 Preview URL	https://metaculus-pr-4943-feat-list-view-virtualization-preview.mtcl.cc
📦 Docker Image	ghcr.io/metaculus/metaculus:feat-list-view-virtualization-bd69086
🗄️ PostgreSQL	NeonDB branch preview/pr-4943-feat-list-view-virtualization
⚡ Redis	Fly Redis mtc-redis-pr-4943-feat-list-view-virtualization

Details

• Commit: 26511d9507ab0349d255f05a20949a7ec44d3c71
• Branch: feat/list-view-virtualization
• Fly App: metaculus-pr-4943-feat-list-view-virtualization

---

ℹ️ Preview Environment Info

Isolation:

• PostgreSQL and Redis are fully isolated from production
• Each PR gets its own database branch and Redis instance
• Changes pushed to this PR will trigger a new deployment

Limitations:

• Background workers and cron jobs are not deployed in preview environments
• If you need to test background jobs, use Heroku staging environments

Cleanup:

• This preview will be automatically destroyed when the PR is closed