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:
@@ -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) {
|
||||
const popupCheckInterval = setInterval(() => {
|
||||
console.log(popup);
|
||||
if (popup.closed) {
|
||||
clearInterval(popupCheckInterval);
|
||||
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(() => {
|
||||
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"
|
||||
|
||||
Reference in New Issue
Block a user