From 3fd1bddca16509878db7fb317b686b47f98ac127 Mon Sep 17 00:00:00 2001
From: LukeParkerDev <10430890+Hona@users.noreply.github.com>
Date: Thu, 14 May 2026 09:59:28 +1000
Subject: [PATCH] fix: defer timeline diff rendering

---
 .../src/pages/session/message-timeline.tsx    | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/pages/session/message-timeline.tsx b/packages/app/src/pages/session/message-timeline.tsx
index f8134976a8..c7cd57aeb4 100644
--- a/packages/app/src/pages/session/message-timeline.tsx
+++ b/packages/app/src/pages/session/message-timeline.tsx
@@ -360,7 +360,6 @@ function TimelineThinkingRow(props: { reasoningHeading?: string; showReasoningSu
 
 function TimelineDiffSummaryRow(props: { diffs: SummaryDiff[] }) {
   const language = useLanguage()
-  const fileComponent = useFileComponent()
   const maxFiles = 10
   const [state, setState] = createStore({
     showAll: false,
@@ -394,7 +393,7 @@ function TimelineDiffSummaryRow(props: { diffs: SummaryDiff[] }) {
         >
           <For each={visible()}>
             {(diff) => {
-              const view = normalize(diff)
+              const opened = createMemo(() => expanded().includes(diff.file))
 
               return (
                 <Accordion.Item value={diff.file}>
@@ -419,9 +418,9 @@ function TimelineDiffSummaryRow(props: { diffs: SummaryDiff[] }) {
                     </Accordion.Trigger>
                   </StickyAccordionHeader>
                   <Accordion.Content>
-                    <div data-slot="session-turn-diff-view" data-scrollable>
-                      <Dynamic component={fileComponent} mode="diff" fileDiff={view.fileDiff} />
-                    </div>
+                    <Show when={opened()}>
+                      <TimelineDiffView diff={diff} />
+                    </Show>
                   </Accordion.Content>
                 </Accordion.Item>
               )
@@ -438,6 +437,17 @@ function TimelineDiffSummaryRow(props: { diffs: SummaryDiff[] }) {
   )
 }
 
+function TimelineDiffView(props: { diff: SummaryDiff }) {
+  const fileComponent = useFileComponent()
+  const view = normalize(props.diff)
+
+  return (
+    <div data-slot="session-turn-diff-view" data-scrollable>
+      <Dynamic component={fileComponent} mode="diff" fileDiff={view.fileDiff} />
+    </div>
+  )
+}
+
 export function MessageTimeline(props: {
   mobileChanges: boolean
   mobileFallback: JSX.Element