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);
|
const uriData = await optima.auth.fetchAuthRedirectUri(PUBLIC_API_URL);
|
||||||
let loading = writable(false);
|
let loading = writable(false);
|
||||||
|
/** Track whether the server-side form action has finished */
|
||||||
|
let formActionDone = false;
|
||||||
|
|
||||||
function handleSubmit(e: SubmitEvent) {
|
function handleSubmit(e: SubmitEvent) {
|
||||||
if ($loading) return;
|
if ($loading) return;
|
||||||
$loading = true;
|
$loading = true;
|
||||||
|
formActionDone = false;
|
||||||
|
|
||||||
const url = uriData.uri;
|
const url = uriData.uri;
|
||||||
const width = 420;
|
const width = 420;
|
||||||
@@ -22,15 +25,26 @@
|
|||||||
|
|
||||||
const popup = window.open(url, "msAuth", features);
|
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(() => {
|
const popupCheckInterval = setInterval(() => {
|
||||||
console.log(popup);
|
|
||||||
if (popup.closed) {
|
if (popup.closed) {
|
||||||
clearInterval(popupCheckInterval);
|
clearInterval(popupCheckInterval);
|
||||||
|
if (formActionDone) {
|
||||||
$loading = false;
|
$loading = false;
|
||||||
}
|
}
|
||||||
}, 500);
|
// If the form action isn't done yet the spinner stays;
|
||||||
|
// the enhance callback below will clear it.
|
||||||
}
|
}
|
||||||
|
}, 500);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -71,7 +85,14 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</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} />
|
<input type="hidden" name="callbackKey" value={uriData.callbackKey} />
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|||||||
Reference in New Issue
Block a user