fix(ui): stop the running spring when its options change

Author: kitlangton

packages/app/test-browser/motion-spring.test.ts

@@ -1,29 +1,58 @@
 import { expect, test } from "bun:test"
 import { useSpring } from "@opencode/ui/motion-spring"
-import { createRoot, createSignal } from "solid-js"
+import { createEffect, createRoot, createSignal } from "solid-js"
+
+// Records every value the spring emits and resolves once it reaches `settled`.
+function watch(progress: () => number, settled: number) {
+  const seen: number[] = []
+  const { promise, resolve } = Promise.withResolvers<void>()
+
+  createEffect(() => {
+    const value = progress()
+
+    seen.push(value)
+
+    if (value === settled) resolve()
+  })
+
+  return { seen, settled: promise }
+}
 
 test("springs progress to its target", async () => {
   const state = createRoot((dispose) => {
     const [target, setTarget] = createSignal(0)
-    const progress = useSpring(target, { visualDuration: 0.1, bounce: 0 })
+    const progress = useSpring(target, { visualDuration: 0.3, bounce: 0 })
 
-    return { dispose, progress, setTarget }
+    return { dispose, progress, setTarget, ...watch(progress, 1) }
   })
 
-  const seen: number[] = []
-
   state.setTarget(1)
+  await Promise.race([state.settled, Bun.sleep(2000)])
 
-  const deadline = Date.now() + 1000
+  expect(state.progress()).toBe(1)
+  expect(state.seen.some((value) => value > 0 && value < 1)).toBe(true)
+  expect(state.seen.every((value) => value <= 1)).toBe(true)
+  state.dispose()
+})
+
+test("new spring options replace the running spring", async () => {
+  const state = createRoot((dispose) => {
+    const [target, setTarget] = createSignal(0)
+    const [duration, setDuration] = createSignal(4)
+    const progress = useSpring(target, () => ({ visualDuration: duration(), bounce: 0 }))
+
+    return { dispose, progress, setTarget, setDuration, ...watch(progress, 1) }
+  })
+
+  state.setTarget(1)
+  await Bun.sleep(100)
+  expect(state.progress()).toBeLessThan(0.5)
 
-  while (state.progress() !== 1 && Date.now() < deadline) {
-    await new Promise((resolve) => setTimeout(resolve, 16))
-    seen.push(state.progress())
-  }
+  // The old four-second spring would still be far from its target after a second.
+  state.setDuration(0.1)
+  await Promise.race([state.settled, Bun.sleep(1000)])
 
   expect(state.progress()).toBe(1)
-  expect(seen.some((value) => value > 0 && value < 1)).toBe(true)
-  expect(seen.every((value) => value <= 1)).toBe(true)
   state.dispose()
 })
 

packages/session-ui/src/tools/tool-renderer.tsx

@@ -73,7 +73,7 @@ function ShellSubmessage(props: { text: string; animate?: boolean }) {
       }
 
       if (valueRef) {
-        valueRef.animate(
+        valueRef.animate?.(
           { opacity: [0, 1], filter: ["blur(2px)", "blur(0px)"] },
           { duration: 320, easing: "cubic-bezier(0.16, 1, 0.3, 1)" },
         )

packages/ui/src/components/motion-spring.tsx

@@ -47,7 +47,10 @@ export function useSpring<K>(target: () => number, options?: Opt | (() => Opt),
     if (eq(config, next)) return
     config = next
     stop()
+    // attachSpring's cleanup only unsubscribes from the source; the running animation keeps ticking until stopped.
+    spring.stop()
     stop = attachSpring(spring, source, next)
+    spring.set(source.get())
     setValue(spring.get())
   })