FIX: show loading spinner when redirecting to discourse connect (#34135)

ZogStriP · web-flow · commit 61b0a3730b68 · 2025-08-07T15:12:55.000+02:00
On "slow" computers and/or in production builds of the client-side application, the redirection to discourse connect (via window.location) might happen _after_ the login/signup route is done loading and the login/signup template is being shown. Since when discourse connect is enabled, no other auth "provider" is allowed, we "flashed" a screen that indicated there was no "login method" configured. In order to fix this, we rely on the "isRedirectingToExternalAuth" boolean and ensure it's set to "true" when discourse connect is enabled. This is unfortunately ~~impossible~~ very hard to test as it depends on how fast the browser running the test is... The only way I was able to reproduce this issue locally was to throttle both the CPU and network in Chrome's performance tab. <img width="861" height="156" alt="Screenshot 2025-08-07 at 13 43 09" src="https://github.com/user-attachments/assets/de02be42-9ce8-4253-8c9c-fd9784a9bb65" /> --- I also renamed `isRedirecting` to `#isRedirecting` to better indicate this is a private variable. --- **BEFORE** https://github.com/user-attachments/assets/568052d9-70eb-4d27-8d59-a4b67ae6d8ac **AFTER** https://github.com/user-attachments/assets/f51ee3f4-3322-4fc8-8e9b-6195413bba12
diff --git a/app/assets/javascripts/discourse/app/routes/login.js b/app/assets/javascripts/discourse/app/routes/login.js
@@ -17,7 +17,7 @@ export default class extends DiscourseRoute {
   @service site;
   @service siteSettings;
 
-  isRedirecting = false;
+  #isRedirecting = false;
 
   beforeModel(transition) {
     const { from, wantsTo } = transition;
@@ -69,7 +69,7 @@ export default class extends DiscourseRoute {
     // Automatically kick off the external login if it's the only one available
     if (isOnlyOneExternalLoginMethod) {
       if (auth_immediately || login_required || !from || wantsTo) {
-        this.isRedirecting = true;
+        this.#isRedirecting = true;
         singleExternalLogin();
       } else {
         router.replaceWith("discovery.login-required");
@@ -78,13 +78,17 @@ export default class extends DiscourseRoute {
   }
 
   setupController(controller) {
+    const { enable_discourse_connect } = this.siteSettings;
+
     super.setupController(...arguments);
 
     // We're in the middle of an authentication flow
     if (document.getElementById("data-authentication")) {
       return;
     }
 
-    controller.isRedirectingToExternalAuth = this.isRedirecting;
+    // Shows the loading spinner while waiting for the redirection to external auth
+    controller.isRedirectingToExternalAuth =
+      this.#isRedirecting || enable_discourse_connect;
   }
 }
diff --git a/app/assets/javascripts/discourse/app/routes/signup.js b/app/assets/javascripts/discourse/app/routes/signup.js
@@ -18,7 +18,7 @@ export default class extends DiscourseRoute {
   @service site;
   @service siteSettings;
 
-  isRedirecting = false;
+  #isRedirecting = false;
 
   beforeModel(transition) {
     const { from, wantsTo } = transition;
@@ -82,7 +82,7 @@ export default class extends DiscourseRoute {
     // Automatically kick off the external login if it's the only one available
     if (isOnlyOneExternalLoginMethod) {
       if (auth_immediately || login_required || !from || wantsTo) {
-        this.isRedirecting = true;
+        this.#isRedirecting = true;
         singleExternalLogin({ signup: true });
       } else {
         router.replaceWith("discovery.login-required");
@@ -91,13 +91,17 @@ export default class extends DiscourseRoute {
   }
 
   setupController(controller) {
+    const { enable_discourse_connect } = this.siteSettings;
+
     super.setupController(...arguments);
 
     // We're in the middle of an authentication flow
     if (document.getElementById("data-authentication")) {
       return;
     }
 
-    controller.isRedirectingToExternalAuth = this.isRedirecting;
+    // Shows the loading spinner while waiting for the redirection to external auth
+    controller.isRedirectingToExternalAuth =
+      this.#isRedirecting || enable_discourse_connect;
   }
 }
