Diffs Performance Improvements (#5653)

Co-authored-by: Adam <[email protected]>

3 files changed, 17 insertions, 9 deletions

diff --git a/packages/ui/src/components/diff-ssr.tsx b/packages/ui/src/components/diff-ssr.tsx
index b38b4a34f..e367a4fbe 100644
--- a/packages/ui/src/components/diff-ssr.tsx
+++ b/packages/ui/src/components/diff-ssr.tsx
@@ -1,8 +1,9 @@
-import { FileDiff } from "@pierre/diffs"
+import { DIFFS_TAG_NAME, FileDiff } from "@pierre/diffs"
 import { PreloadMultiFileDiffResult } from "@pierre/diffs/ssr"
 import { onCleanup, onMount, Show, splitProps } from "solid-js"
-import { isServer } from "solid-js/web"
+import { Dynamic, isServer } from "solid-js/web"
 import { createDefaultOptions, styleVariables, type DiffProps } from "../pierre"
+import { useWorkerPool } from "../context/worker-pool"
 
 export type SSRDiffProps<T = {}> = DiffProps<T> & {
   preloadedDiff: PreloadMultiFileDiffResult<T>
@@ -12,17 +13,21 @@ export function Diff<T>(props: SSRDiffProps<T>) {
   let container!: HTMLDivElement
   let fileDiffRef!: HTMLElement
   const [local, others] = splitProps(props, ["before", "after", "class", "classList", "annotations"])
+  const workerPool = useWorkerPool()
 
   let fileDiffInstance: FileDiff<T> | undefined
   const cleanupFunctions: Array<() => void> = []
 
   onMount(() => {
     if (isServer || !props.preloadedDiff) return
-    fileDiffInstance = new FileDiff<T>({
-      ...createDefaultOptions(props.diffStyle),
-      ...others,
-      ...props.preloadedDiff,
-    })
+    fileDiffInstance = new FileDiff<T>(
+      {
+        ...createDefaultOptions(props.diffStyle),
+        ...others,
+        ...props.preloadedDiff,
+      },
+      workerPool,
+    )
     // @ts-expect-error - fileContainer is private but needed for SSR hydration
     fileDiffInstance.fileContainer = fileDiffRef
     fileDiffInstance.hydrate({
@@ -65,11 +70,11 @@ export function Diff<T>(props: SSRDiffProps<T>) {
 
   return (
     <div data-component="diff" style={styleVariables} ref={container}>
-      <diffs-container ref={fileDiffRef} id="ssr-diff">
+      <Dynamic component={DIFFS_TAG_NAME} ref={fileDiffRef} id="ssr-diff">
         <Show when={isServer}>
           <template shadowrootmode="open" innerHTML={props.preloadedDiff.prerenderedHTML} />
         </Show>
-      </diffs-container>
+      </Dynamic>
     </div>
   )
 }
diff --git a/packages/ui/src/components/diff.css b/packages/ui/src/components/diff.css
index 345271a12..3251eb4c6 100644
--- a/packages/ui/src/components/diff.css
+++ b/packages/ui/src/components/diff.css
@@ -1,4 +1,6 @@
 [data-component="diff"] {
+  contain: content;
+
   [data-slot="diff-hunk-separator-line-number"] {
     position: sticky;
     left: 0;
diff --git a/packages/ui/src/components/session-review.css b/packages/ui/src/components/session-review.css
index 0cd228592..35df4a80f 100644
--- a/packages/ui/src/components/session-review.css
+++ b/packages/ui/src/components/session-review.css
@@ -5,6 +5,7 @@
   height: 100%;
   overflow-y: auto;
   scrollbar-width: none;
+  contain: strict;
   &::-webkit-scrollbar {
     display: none;
   }