fix(app): defer diff rendering

packages/app/src/pages/session.tsx

@@ -1,4 +1,16 @@
-import { onCleanup, Show, Match, Switch, createMemo, createEffect, on, onMount, untrack } from "solid-js"
+import {
+  onCleanup,
+  Show,
+  Match,
+  Switch,
+  createMemo,
+  createEffect,
+  createComputed,
+  on,
+  onMount,
+  untrack,
+  createSignal,
+} from "solid-js"
 import { createMediaQuery } from "@solid-primitives/media"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { useLocal } from "@/context/local"
@@ -406,6 +418,18 @@ export default function Page() {
     newSessionWorktree: "main",
   })
 
+  const [deferRender, setDeferRender] = createSignal(false)
+  createComputed((prev) => {
+    const key = sessionKey()
+    if (key !== prev) {
+      setDeferRender(true)
+      requestAnimationFrame(() => {
+        setTimeout(() => setDeferRender(false), 0)
+      })
+    }
+    return key
+  }, sessionKey())
+
   const turnDiffs = createMemo(() => lastUserMessage()?.summary?.diffs ?? [])
   const reviewDiffs = createMemo(() => (store.changes === "session" ? diffs() : turnDiffs()))
 
@@ -712,6 +736,10 @@ export default function Page() {
     loadingClass: string
     emptyClass: string
   }) => (
+    <Show
+      when={!deferRender()}
+      fallback={<div class={input.loadingClass}>{language.t("session.review.loadingChanges")}</div>}
+    >
       <Switch>
         <Match when={store.changes === "turn" && !!params.id}>
           <SessionReviewTab
@@ -790,6 +818,7 @@ export default function Page() {
           />
         </Match>
       </Switch>
+    </Show>
   )
 
   const reviewPanel = () => (