Setup wizard no longer vanishes during AI re-analysis
The AI workflow setup wizard now stays visible when re-analysis triggers a new request ID, with a loading state shown during the transition instead of going blank.
The AI workflow setup wizard in n8n's editor could vanish or appear empty when the backend re-analysis sent a new request ID. Vue destroyed the old wizard instance and created a new one, but the old instance's async fetches could still resolve after the remount—overwriting the new wizard's state with stale data.
The fix adds an unmount guard. After each async operation in the setup lifecycle, the component checks whether it has since been unmounted and bails out if it has. The dead instance never touches the workflow store. A loading spinner now appears during the unmount-to-remount gap, giving users feedback while the new instance initializes.
This fixes a race condition in the n8n editor's AI workflow setup component that could leave users staring at a blank wizard.
View Original GitHub Description
Summary
- Add unmount guard to
InstanceAiWorkflowSetupso async mount work (fetchWorkflowApi, credential preloading) bails out when the component has already been destroyed by arequestIdchange — prevents the dead instance from overwriting the workflow store - Show a loading spinner while async setup is in flight, preventing a blank gap during the unmount→remount transition
How this fixes the disappearing setup wizard
The setup wizard component is keyed by requestId in the parent panel. When the backend re-suspends with a new requestId (e.g. after re-analysis), Vue destroys the old component instance and creates a new one.
The problem is that onMounted performs async work — it fetches credentials and the workflow via API — but never checks whether the component was unmounted while those fetches were in flight. This creates a race condition:
- Component A mounts, starts
fetchWorkflowApi(async) - Backend sends a new
requestId→ Component A unmounts (restorespreviousWorkflowto the store), Component B mounts - Component A's fetch resolves → calls
workflowsStore.setWorkflow()with stale data, clobbering Component B's state - The wizard appears empty or disappears entirely
The fix adds an isMounted flag that is set to false in onUnmounted. After each await in onMounted, we check if (!isMounted) return to bail out early — the dead component instance never touches the workflow store.
Additionally, the template now shows a loading spinner ("Loading setup…") while the async initialization is running, so the user sees feedback during the unmount→remount gap instead of a blank space.
Related Linear ticket
- I have seen this code, I have run this code, and I take responsibility for this code.