Skip to content

Conversation

@ammar-agent
Copy link
Collaborator

@ammar-agent ammar-agent commented Oct 31, 2025

Eliminates scroll jank by skipping syntax highlighting for hunks outside the viewport.

The Problem

Large diffs (500+ hunks) had jerky scrolling caused by:

  • Async Shiki WASM tokenization triggering layout shifts mid-scroll
  • Height recalculations as hunks highlight asynchronously
  • Cascading re-renders when visibility changes

Solution

Lazy highlighting with caching:

  • Each hunk tracks its own visibility via IntersectionObserver (600px pre-load margin)
  • Hunks outside viewport render as plain text (no Shiki calls)
  • Once highlighted, result is cached even when leaving viewport
  • Only re-renders when transitioning to visible (not invisible)

Result: Each hunk highlights once on first appearance, then keeps cached result forever.

Performance

  • ✅ Smooth 60fps scrolling with 500+ hunks
  • ✅ No re-highlighting during scroll
  • ✅ ~50% fewer state updates (only on entering viewport)
  • ✅ Eliminates async layout shifts

Implementation

Two files changed (+68 lines):

  • HunkViewer: IntersectionObserver visibility tracking
  • DiffRenderer: Cached highlighting with enableHighlighting prop

No changes to ReviewPanel or FileTree behavior - focused diff for easy review.

Generated with cmux

@ammar-agent ammar-agent changed the title 🤖 perf: virtualize Review tab hunks with react-virtuoso 🤖 perf: lazy-load syntax highlighting for off-viewport hunks Oct 31, 2025
@ammario ammario enabled auto-merge October 31, 2025 17:45
Skip Shiki syntax highlighting for hunks outside viewport to reduce
scroll jank from async layout shifts.

Implementation:
- HunkViewer tracks its own visibility with IntersectionObserver
- 600px rootMargin pre-loads hunks before entering viewport
- DiffRenderer skips highlighting when enableHighlighting=false
- Cached: once highlighted, keeps result even when leaving viewport

Performance:
- Each hunk highlights once on first appearance
- No re-highlighting when scrolling past hunks
- Only state updates when transitioning to visible (not invisible)
- Smooth 60fps scrolling with 500+ hunks

Net: +68 lines across 2 files (HunkViewer, DiffRenderer)
@ammario ammario added this pull request to the merge queue Oct 31, 2025
@ammario ammario removed this pull request from the merge queue due to a manual request Oct 31, 2025
@ammario ammario merged commit 0f870a6 into main Oct 31, 2025
13 checks passed
@ammario ammario deleted the cr-offscreen branch October 31, 2025 18:04
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.

2 participants