feat(code): add diff panel virtualization (#1623)

## Problem

see thread: https://discord.com/channels/1465397904901673123/1489347523335426269

repos with lots of files or large files in the dirty git state cause performance issues as the diff panel tries to compute and render all of them

<!-- Who is this for and what problem does it solve? -->

<!-- Closes #ISSUE_ID -->

## Changes

adds virtualization to hopefully mitigate the issue

<!-- What did you change and why? -->

<!-- If there are frontend changes, include screenshots. -->

## How did you test this?

manually tested with this state, it was definitely slow, but at least the app did not compeltely die![Screenshot 2026-04-13 at 11.12.44 AM.png](https://app.graphite.com/user-attachments/assets/79feb54c-52c0-4b45-ab4a-936d90dd622e.png)

Author: adboio

apps/code/src/renderer/features/code-review/components/CloudReviewPage.tsx

@@ -10,6 +10,7 @@ import { useMemo } from "react";
 import type { DiffOptions } from "../types";
 import type { PrCommentThread } from "../utils/prCommentAnnotations";
 import { InteractiveFileDiff } from "./InteractiveFileDiff";
+import { LazyDiff } from "./LazyDiff";
 import {
   DeferredDiffPlaceholder,
   DiffFileHeader,
@@ -102,15 +103,17 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
 
         return (
           <div key={file.path} data-file-path={file.path}>
-            <CloudFileDiff
-              file={file}
-              taskId={taskId}
-              prUrl={prUrl}
-              options={diffOptions}
-              collapsed={isCollapsed}
-              onToggle={() => toggleFile(file.path)}
-              commentThreads={showReviewComments ? commentThreads : undefined}
-            />
+            <LazyDiff>
+              <CloudFileDiff
+                file={file}
+                taskId={taskId}
+                prUrl={prUrl}
+                options={diffOptions}
+                collapsed={isCollapsed}
+                onToggle={() => toggleFile(file.path)}
+                commentThreads={showReviewComments ? commentThreads : undefined}
+              />
+            </LazyDiff>
           </div>
         );
       })}

apps/code/src/renderer/features/code-review/components/LazyDiff.tsx

@@ -0,0 +1,31 @@
+import { type ReactNode, useEffect, useRef, useState } from "react";
+
+const VISIBILITY_MARGIN = 1500;
+
+interface LazyDiffProps {
+  children: ReactNode;
+}
+
+export function LazyDiff({ children }: LazyDiffProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || mounted) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setMounted(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: `${VISIBILITY_MARGIN}px 0px` },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [mounted]);
+
+  return <div ref={ref}>{mounted ? children : null}</div>;
+}

apps/code/src/renderer/features/code-review/components/ReviewPage.tsx

@@ -11,6 +11,7 @@ import { useMemo } from "react";
 import { useReviewDiffs } from "../hooks/useReviewDiffs";
 import type { DiffOptions } from "../types";
 import { InteractiveFileDiff } from "./InteractiveFileDiff";
+import { LazyDiff } from "./LazyDiff";
 import {
   DeferredDiffPlaceholder,
   type DeferredReason,
@@ -108,14 +109,16 @@ export function ReviewPage({ task }: ReviewPageProps) {
         const isCollapsed = collapsedFiles.has(key);
         return (
           <div key={key} data-file-path={key}>
-            <UntrackedFileDiff
-              file={file}
-              repoPath={repoPath}
-              options={diffOptions}
-              collapsed={isCollapsed}
-              onToggle={() => toggleFile(key)}
-              taskId={taskId}
-            />
+            <LazyDiff>
+              <UntrackedFileDiff
+                file={file}
+                repoPath={repoPath}
+                options={diffOptions}
+                collapsed={isCollapsed}
+                onToggle={() => toggleFile(key)}
+                taskId={taskId}
+              />
+            </LazyDiff>
           </div>
         );
       })}
@@ -183,22 +186,24 @@ function FileDiffList({
 
     return (
       <div key={key} data-file-path={key}>
-        <InteractiveFileDiff
-          fileDiff={fileDiff}
-          repoPath={repoPath}
-          options={{ ...diffOptions, collapsed: isCollapsed }}
-          taskId={taskId}
-          renderCustomHeader={(fd) => (
-            <DiffFileHeader
-              fileDiff={fd}
-              collapsed={isCollapsed}
-              onToggle={() => toggleFile(key)}
-              onOpenFile={() =>
-                openFile(taskId, `${repoPath}/${filePath}`, false)
-              }
-            />
-          )}
-        />
+        <LazyDiff>
+          <InteractiveFileDiff
+            fileDiff={fileDiff}
+            repoPath={repoPath}
+            options={{ ...diffOptions, collapsed: isCollapsed }}
+            taskId={taskId}
+            renderCustomHeader={(fd) => (
+              <DiffFileHeader
+                fileDiff={fd}
+                collapsed={isCollapsed}
+                onToggle={() => toggleFile(key)}
+                onOpenFile={() =>
+                  openFile(taskId, `${repoPath}/${filePath}`, false)
+                }
+              />
+            )}
+          />
+        </LazyDiff>
       </div>
     );
   });