From 9f3502a76aabe4a3cbf56ca01099eb2c9848628b Mon Sep 17 00:00:00 2001
From: Stan Wohlwend <n2d4xc@gmail.com>
Date: Thu, 9 May 2024 11:34:11 +0200
Subject: [PATCH] Improved redirection loading indicator

---
 .../components-page/magic-link-callback.tsx   |  4 ++--
 .../src/components/redirect-message-card.tsx  | 24 +++++++------------
 packages/stack/src/lib/stack-app.ts           |  2 +-
 3 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/packages/stack/src/components-page/magic-link-callback.tsx b/packages/stack/src/components-page/magic-link-callback.tsx
index 175211ce4..5e3ec5787 100644
--- a/packages/stack/src/components-page/magic-link-callback.tsx
+++ b/packages/stack/src/components-page/magic-link-callback.tsx
@@ -35,7 +35,7 @@ export default function MagicLinkCallback({
     </MessageCard>
   );
 
-  const allredyUsedJsx = (
+  const alreadyUsedJsx = (
     <MessageCard title="Magic Link Already Used" fullPage={fullPage}>
       <p>The magic link has already been used. The link can only be used once. Please request a new magic link if you need to sign-in again.</p>
     </MessageCard>
@@ -52,7 +52,7 @@ export default function MagicLinkCallback({
   } else if (error instanceof KnownErrors.MagicLinkCodeExpired) {
     return expiredJsx;
   } else if (error instanceof KnownErrors.MagicLinkCodeAlreadyUsed) {
-    return allredyUsedJsx;
+    return alreadyUsedJsx;
   } else if (error) {
     throw error;
   }
diff --git a/packages/stack/src/components/redirect-message-card.tsx b/packages/stack/src/components/redirect-message-card.tsx
index 803506b67..63a1018ea 100644
--- a/packages/stack/src/components/redirect-message-card.tsx
+++ b/packages/stack/src/components/redirect-message-card.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/navigation";
 import { useStackApp } from "..";
 import MessageCard from "./message-card";
 import { Text, Button } from "../components-core";
-import { neverResolve } from "@stackframe/stack-shared/dist/utils/promises";
+import { neverResolve, wait } from "@stackframe/stack-shared/dist/utils/promises";
 
 export default function RedirectMessageCard({ 
   type,
@@ -17,44 +17,42 @@ export default function RedirectMessageCard({
   const router = useRouter();
 
   let title: string;
-  let primaryUrl: string;
-  let secondaryUrl: string | null = null;
+  let primaryAction: () => Promise<void>;
   let message: string | null = null;
   let primaryButton: string;
   let secondaryButton: string | null = null;
   switch (type) {
     case 'signedIn': {
       title = "You are already signed in";
-      primaryUrl = stackApp.urls.home;
-      secondaryUrl = stackApp.urls.signOut;
+      primaryAction = () => stackApp.redirectToAfterSignOut();
       primaryButton = "Go to Home";
       secondaryButton = "Sign Out";
       break;
     }
     case 'signedOut': {
       title = "You are not currently signed in.";
-      primaryUrl = stackApp.urls.home;
+      primaryAction = () => stackApp.redirectToSignIn();
       primaryButton = "Go to Home";
       break;
     }
     case 'emailSent': {
       title = "Email sent!";
       message = 'Please check your inbox. Make sure to check your spam folder.';
-      primaryUrl = stackApp.urls.home;
+      primaryAction = () => neverResolve();
       primaryButton = "Go to Home";
       break;
     }
     case 'passwordReset': {
       title = "Password reset successfully!";
       message = 'Your password has been reset. You can now sign in with your new password.';
-      primaryUrl = stackApp.urls.signIn;
+      primaryAction = () => stackApp.redirectToSignIn();
       primaryButton = "Go to Sign In";
       break;
     }
     case 'emailVerified': {
       title = "Email verified!";
       message = 'Your have successfully verified your email.';
-      primaryUrl = stackApp.urls.home;
+      primaryAction = () => stackApp.redirectToSignIn();
       primaryButton = "Go to Home";
       break;
     }
@@ -69,18 +67,14 @@ export default function RedirectMessageCard({
           <Button
             variant="secondary"
             onClick={async () => {
-              router.push(stackApp.urls.signOut.toString());
-              await neverResolve();
+              await stackApp.redirectToSignOut();
             }}
           >
             {secondaryButton}
           </Button>
         )}
         
-        <Button onClick={async () => {
-          router.push(primaryUrl.toString());
-          await neverResolve();
-        }}>
+        <Button onClick={primaryAction}>
           {primaryButton}
         </Button>
       </div>
diff --git a/packages/stack/src/lib/stack-app.ts b/packages/stack/src/lib/stack-app.ts
index 23d39dd2a..87a5830b5 100644
--- a/packages/stack/src/lib/stack-app.ts
+++ b/packages/stack/src/lib/stack-app.ts
@@ -573,7 +573,7 @@ class _StackClientAppImpl<HasTokenStore extends boolean, ProjectId extends strin
       throw new Error(`No URL for handler name ${handlerName}`);
     }
     window.location.href = this.urls[handlerName];
-    return neverResolve();
+    return wait(2000);
   }
 
   async redirectToSignIn() { return await this._redirectTo("signIn"); }