Fix progress bars not clearing on completion after React 19 upgrade

.changeset/cool-papers-behave.md

@@ -0,0 +1,5 @@
+---
+'@shopify/app': patch
+---
+
+[fix] Task progress bars once again clear when complete

packages/cli-kit/src/private/node/ui/components/SingleTask.tsx

@@ -9,11 +9,12 @@ interface SingleTaskProps<T> {
   title: TokenizedString
   task: (updateStatus: (status: TokenizedString) => void) => Promise<T>
   onComplete?: (result: T) => void
+  onError?: (error: Error) => void
   onAbort?: () => void
   noColor?: boolean
 }
 
-const SingleTask = <T,>({task, title, onComplete, onAbort, noColor}: SingleTaskProps<T>) => {
+const SingleTask = <T,>({task, title, onComplete, onError, onAbort, noColor}: SingleTaskProps<T>) => {
   const [status, setStatus] = useState(title)
   const [isDone, setIsDone] = useState(false)
   const {exit: unmountInk} = useApp()
@@ -35,13 +36,16 @@ const SingleTask = <T,>({task, title, onComplete, onAbort, noColor}: SingleTaskP
       .then((result) => {
         setIsDone(true)
         onComplete?.(result)
-        unmountInk()
+        // Defer unmount so React 19 can flush batched state updates
+        // before the component tree is torn down.
+        setImmediate(() => unmountInk())
       })
       .catch((error) => {
         setIsDone(true)
-        unmountInk(error)
+        onError?.(error)
+        setImmediate(() => unmountInk(error))
       })
-  }, [task, unmountInk, onComplete])
+  }, [task, unmountInk, onComplete, onError])
 
   if (isDone) {
     // clear things once done

packages/cli-kit/src/private/node/ui/hooks/use-async-and-unmount.ts

@@ -16,11 +16,13 @@ export default function useAsyncAndUnmount(
     asyncFunction()
       .then(() => {
         onFulfilled()
-        unmountInk()
+        // Defer unmount so React 19 can flush batched state updates
+        // before the component tree is torn down.
+        setImmediate(() => unmountInk())
       })
       .catch((error) => {
         onRejected(error)
-        unmountInk(error)
+        setImmediate(() => unmountInk(error))
       })
   }, [])
 }

packages/cli-kit/src/public/node/ui.tsx

@@ -522,7 +522,7 @@ export async function renderSingleTask<T>({
   renderOptions,
 }: RenderSingleTaskOptions<T>): Promise<T> {
   return new Promise<T>((resolve, reject) => {
-    render(<SingleTask title={title} task={task} onComplete={resolve} onAbort={onAbort} />, {
+    render(<SingleTask title={title} task={task} onComplete={resolve} onError={reject} onAbort={onAbort} />, {
       ...renderOptions,
       exitOnCtrlC: false,
     }).catch(reject)