fix: keep login spinner visible until auth callback completes

- Spinner was disappearing when the OAuth popup closed, but the server
  was still waiting for the socket callback (awaitAuthCallback)
- Now the spinner stays until BOTH the popup closes AND the form action
  finishes
- Handle popup-blocked case by resetting loading state immediately
This commit is contained in:
2026-02-27 18:08:27 -06:00
parent 3b43393e5d
commit 0e634c84ff
+25 -4
View File
@@ -8,10 +8,13 @@
const uriData = await optima.auth.fetchAuthRedirectUri(PUBLIC_API_URL);
let loading = writable(false);
/** Track whether the server-side form action has finished */
let formActionDone = false;
function handleSubmit(e: SubmitEvent) {
if ($loading) return;
$loading = true;
formActionDone = false;
const url = uriData.uri;
const width = 420;
@@ -22,15 +25,26 @@
const popup = window.open(url, "msAuth", features);
if (popup) {
if (!popup) {
// Popup was blocked — reset so the user can try again
$loading = false;
return;
}
// Only hide the spinner when BOTH the popup has closed AND the
// server-side form action (awaitAuthCallback) has completed.
// Previously the spinner was removed as soon as the popup closed,
// leaving a gap while the server was still processing the callback.
const popupCheckInterval = setInterval(() => {
console.log(popup);
if (popup.closed) {
clearInterval(popupCheckInterval);
if (formActionDone) {
$loading = false;
}
}, 500);
// If the form action isn't done yet the spinner stays;
// the enhance callback below will clear it.
}
}, 500);
}
</script>
@@ -71,7 +85,14 @@
</svg>
</button>
<form action="?/login" method="POST" onsubmit={handleSubmit} use:enhance>
<form action="?/login" method="POST" onsubmit={handleSubmit} use:enhance={() => {
// Called when the form action response comes back from the server
return async ({ update }) => {
formActionDone = true;
$loading = false;
await update();
};
}}>
<input type="hidden" name="callbackKey" value={uriData.callbackKey} />
<button
type="submit"