Skip to content

Defer feed chart rendering#4954

Open
ncarazon wants to merge 1 commit into
mainfrom
feat/defer-feed-chart-rendering
Open

Defer feed chart rendering#4954
ncarazon wants to merge 1 commit into
mainfrom
feat/defer-feed-chart-rendering

Conversation

@ncarazon

@ncarazon ncarazon commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

Related to #4937

Summary

Adds deferred feed chart rendering so feed cards can paint content before mounting expensive Victory charts.

Implemented changes:

  • Added reusable useDeferredRender hook that schedules expensive rendering during browser idle time, with a timeout fallback.
  • Deferred chart mounts in consumer feed cards, including continuous question previews, grouped TimeSeriesChart, and date forecast charts.
  • Deferred chart mounts in forecaster feed cards, including continuous/numeric timelines, multiple-choice charts, and fan charts.

Performance notes:

With Chrome CPU throttling at 4x slowdown, the post-response client-side render phase improved from ~10s before to ~6s after in local testing.

Summary by CodeRabbit

  • New Features
    • Improved feed-page loading by deferring heavy chart rendering until the browser is idle.
    • Added lightweight placeholder areas to preserve card layout while charts load later.
  • Bug Fixes
    • Reduced layout shifting and visual jank in feed views that include forecasts and charts (continuous, multiple choice, and fan/date chart variants).
    • Ensured non-feed views and unaffected question types behave as before.

@coderabbitai

coderabbitai Bot commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

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: 5375cb0b-2243-4873-aace-f8bc40037935

📥 Commits

Reviewing files that changed from the base of the PR and between e24dbfd and ecd2622.

📒 Files selected for processing (7)
  • front_end/src/components/consumer_post_card/consumer_question_tile/index.tsx
  • front_end/src/components/consumer_post_card/group_forecast_card/date_forecast_card/index.tsx
  • front_end/src/components/consumer_post_card/group_forecast_card/index.tsx
  • front_end/src/components/consumer_post_card/index.tsx
  • front_end/src/components/post_card/multiple_choice_tile/index.tsx
  • front_end/src/components/post_card/question_tile/question_continuous_tile.tsx
  • front_end/src/hooks/use_deferred_render.ts
✅ Files skipped from review due to trivial changes (1)
  • front_end/src/components/consumer_post_card/index.tsx
🚧 Files skipped from review as they are similar to previous changes (6)
  • front_end/src/components/post_card/question_tile/question_continuous_tile.tsx
  • front_end/src/components/consumer_post_card/group_forecast_card/index.tsx
  • front_end/src/components/consumer_post_card/consumer_question_tile/index.tsx
  • front_end/src/hooks/use_deferred_render.ts
  • front_end/src/components/consumer_post_card/group_forecast_card/date_forecast_card/index.tsx
  • front_end/src/components/post_card/multiple_choice_tile/index.tsx

📝 Walkthrough

Walkthrough

Adds a deferred-render hook and threads a forFeedPage flag through feed card components so chart mounting can wait for browser idle, with placeholder elements used until rendering is enabled.

Changes

Deferred Feed Chart Rendering

Layer / File(s) Summary
useDeferredRender hook
front_end/src/hooks/use_deferred_render.ts
New hook schedules readiness with requestIdleCallback or a timeout fallback, tracks resetKey, and returns true immediately when disabled.
QuestionContinuousTile and MultipleChoiceTile deferred rendering
front_end/src/components/post_card/question_tile/question_continuous_tile.tsx, front_end/src/components/post_card/multiple_choice_tile/index.tsx
Continuous, multiple-choice, and fan chart renders now gate mounting on deferred readiness and replace deferred chart areas with placeholders or null.
Consumer card components deferred rendering and prop wiring
front_end/src/components/consumer_post_card/index.tsx, front_end/src/components/consumer_post_card/consumer_question_tile/index.tsx, front_end/src/components/consumer_post_card/group_forecast_card/index.tsx, front_end/src/components/consumer_post_card/group_forecast_card/date_forecast_card/index.tsx
forFeedPage is threaded from ConsumerPostCard into consumer question and forecast cards, which now defer chart rendering with fixed-height placeholders when feed-page rendering is enabled.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • cemreinanc
  • hlbmtc
  • elisescu

🐇 I hopped through the feed when the browser was slow,
and waited for idle before letting charts show.
With placeholders snug and the renders set free,
the page takes a breath—then charts bloom for me.

🚥 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 summarizes the main change: deferring feed chart rendering.
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/defer-feed-chart-rendering

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

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
front_end/src/components/post_card/multiple_choice_tile/index.tsx (1)

240-280: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Pass forFeedPage through to the child charts.
At lines 257, 280, and 376, the bare JSX prop makes each chart receive true unconditionally. That forces feed-mode behavior even when this tile is rendered outside the feed.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@front_end/src/components/post_card/multiple_choice_tile/index.tsx` around
lines 240 - 280, The `MultipleChoiceTile` child chart props are currently
hardcoding `forFeedPage` to true, which forces feed behavior in both
`MultipleChoiceChart` and `GroupChart` even when this component is not rendered
on the feed. Update the `MultipleChoiceTile` render logic to pass the existing
`forFeedPage` value through to each child chart instead of using a bare JSX
prop, and make sure the same fix is applied wherever the chart component is
rendered in this file.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@front_end/src/components/post_card/multiple_choice_tile/index.tsx`:
- Around line 240-280: The `MultipleChoiceTile` child chart props are currently
hardcoding `forFeedPage` to true, which forces feed behavior in both
`MultipleChoiceChart` and `GroupChart` even when this component is not rendered
on the feed. Update the `MultipleChoiceTile` render logic to pass the existing
`forFeedPage` value through to each child chart instead of using a bare JSX
prop, and make sure the same fix is applied wherever the chart component is
rendered in this file.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 17b3364b-1dc0-4cc7-90a9-2eb191fb72f1

📥 Commits

Reviewing files that changed from the base of the PR and between f1d6af2 and e24dbfd.

📒 Files selected for processing (7)
  • front_end/src/components/consumer_post_card/consumer_question_tile/index.tsx
  • front_end/src/components/consumer_post_card/group_forecast_card/date_forecast_card/index.tsx
  • front_end/src/components/consumer_post_card/group_forecast_card/index.tsx
  • front_end/src/components/consumer_post_card/index.tsx
  • front_end/src/components/post_card/multiple_choice_tile/index.tsx
  • front_end/src/components/post_card/question_tile/question_continuous_tile.tsx
  • front_end/src/hooks/use_deferred_render.ts

@github-actions

github-actions Bot commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

🚀 Preview Environment

Your preview environment is ready!

Resource Details
🌐 Preview URL https://metaculus-pr-4954-feat-defer-feed-chart-renderin-preview.mtcl.cc
📦 Docker Image ghcr.io/metaculus/metaculus:feat-defer-feed-chart-rendering-ecd2622
🗄️ PostgreSQL NeonDB branch preview/pr-4954-feat-defer-feed-chart-renderin
Redis Fly Redis mtc-redis-pr-4954-feat-defer-feed-chart-renderin

Details

  • Commit: 728f8d5782cc4db78ee84baf61021167ac6c01a7
  • Branch: feat/defer-feed-chart-rendering
  • Fly App: metaculus-pr-4954-feat-defer-feed-chart-renderin

ℹ️ 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant