Infinite Loading Spinner When Accepting AI Diff Before Editor Mounts
In the SQL Editor AI, clicking 'Accept Changes' sets a loading state and then returns early if the diff editor is not yet mounted, leaving the button in a perpetual loading state until the page is refreshed.
The loading state is set to true before a guard clause that returns early when the diff editor reference is undefined. The early return path does not reset the loading state, causing an infinite spinner.
1. Open the SQL Editor in Supabase Studio.
2. Use the AI assistant to generate a SQL diff.
3. Click 'Accept Changes' immediately, before the diff editor has fully mounted.
4. Observe that the button spinner remains active indefinitely and does not stop.
Fixing Code Block
const handleAcceptDiff = async () => {
if (!diffEditorRef.current) {
// Reset loading state if it was ever set, and optionally show an error
setIsAcceptDiffLoading(false);
// TODO: show error if undefined
return;
}
setIsAcceptDiffLoading(true);
try {
// existing logic to accept the diff
} finally {
setIsAcceptDiffLoading(false);
}
};
Move the loading state assignment after the guard clause that checks if the diff editor is mounted. This ensures that the loading state is only set when the operation actually proceeds, and it is always cleared in a finally block to handle both success and error cases.
Edge Case Audit
The fix prevents the infinite spinner but does not provide user feedback when the editor is not mounted. Users may still click the button repeatedly without any visual cue. Consider adding a toast or error message. Also, if the diff editor mounts after a short delay, the user will need to click again; this could be mitigated by disabling the button until the editor is ready. The change should be regression tested with concurrent clicks and rapid mounting scenarios.
