From c6c05d2a5d74c0ab3bd9dcad3bd2d20c4f3368ac Mon Sep 17 00:00:00 2001
From: Neil <4138956+nwparker@users.noreply.github.com>
Date: Fri, 29 May 2026 19:16:47 -0700
Subject: [PATCH] fix: cancel onboarding enter frames (#3418)

---
 .../OnboardingInlineCommandTerminal.tsx       | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/renderer/src/components/onboarding/OnboardingInlineCommandTerminal.tsx b/src/renderer/src/components/onboarding/OnboardingInlineCommandTerminal.tsx
index 9b07547cca9..ea35702269f 100644
--- a/src/renderer/src/components/onboarding/OnboardingInlineCommandTerminal.tsx
+++ b/src/renderer/src/components/onboarding/OnboardingInlineCommandTerminal.tsx
@@ -82,7 +82,7 @@ export function OnboardingInlineCommandTerminal({
 
   useEffect(() => {
     if (!autoScrollIntoView) {
-      return
+      return undefined
     }
     if (prefersReducedMotion) {
       const scrollFrame = window.requestAnimationFrame(() => {
@@ -93,20 +93,32 @@ export function OnboardingInlineCommandTerminal({
     // Why: double rAF guarantees the browser commits the initial collapsed
     // styles before we flip to `entered`, so the height/opacity transition
     // actually plays instead of snapping straight to the final state.
+    let enteredFrame: number | null = null
     const enterFrame = window.requestAnimationFrame(() => {
-      window.requestAnimationFrame(() => setEntered(true))
+      enteredFrame = window.requestAnimationFrame(() => setEntered(true))
     })
-    return () => window.cancelAnimationFrame(enterFrame)
+    return () => {
+      window.cancelAnimationFrame(enterFrame)
+      if (enteredFrame !== null) {
+        window.cancelAnimationFrame(enteredFrame)
+      }
+    }
   }, [autoScrollIntoView, prefersReducedMotion])
 
   useEffect(() => {
     if (autoScrollIntoView) {
-      return
+      return undefined
     }
+    let enteredFrame: number | null = null
     const enterFrame = window.requestAnimationFrame(() => {
-      window.requestAnimationFrame(() => setEntered(true))
+      enteredFrame = window.requestAnimationFrame(() => setEntered(true))
     })
-    return () => window.cancelAnimationFrame(enterFrame)
+    return () => {
+      window.cancelAnimationFrame(enterFrame)
+      if (enteredFrame !== null) {
+        window.cancelAnimationFrame(enteredFrame)
+      }
+    }
   }, [autoScrollIntoView])
 
   // Why: tracking scroll *during* the height transition is unavoidably