From 24a2ff5016848b77ea8a8c2be0e14cefc7199caf Mon Sep 17 00:00:00 2001
From: evykassirer <evy.kassirer@gmail.com>
Date: Sun, 25 Jun 2023 16:24:01 -0700
Subject: [PATCH] loading: Show error when spectator fails to register.

Fixes #25683.
---
 templates/zerver/app/index.html | 28 +++++++++++++++++++---------
 web/src/ui_init.js              | 30 +++++++++++++++---------------
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/templates/zerver/app/index.html b/templates/zerver/app/index.html
index 709dad8c4e..5f8134498a 100644
--- a/templates/zerver/app/index.html
+++ b/templates/zerver/app/index.html
@@ -47,6 +47,13 @@
     animation-fill-mode: forwards;
     visibility: hidden;
     }
+    #app-loading-error {
+    display: flex;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+    visibility: hidden;
+    }
     :root.dark-theme #app-loading {
     background-color: hsl(0, 0%, 11%);
     color: hsl(236, 33%, 90%);
@@ -118,16 +125,19 @@
         </div>
     </div>
     <div id="app-loading-bottom-content">
-        <p>{% trans %}If this message does not go away, try <a id="reload-lnk">reloading</a> the page.{% endtrans %}</p>
-        <script nonce="{{ csp_nonce }}">
-            document.addEventListener('DOMContentLoaded', function () {
-                function reload() {
-                    location.reload(true);
-                }
-                document.getElementById('reload-lnk').addEventListener('click', reload);
-            });
-        </script>
+        <p>{% trans %}If this message does not go away, try <a class="reload-lnk">reloading</a> the page.{% endtrans %}</p>
     </div>
+    <div id="app-loading-error">
+        <p>{% trans %}Error loading Zulip. Try <a class="reload-lnk">reloading</a> the page.{% endtrans %}</p>
+    </div>
+    <script nonce="{{ csp_nonce }}">
+        document.addEventListener('DOMContentLoaded', function () {
+            function reload() {
+                location.reload(true);
+            }
+            document.querySelectorAll('.reload-lnk').forEach(lnk => lnk.addEventListener('click', reload));
+        });
+    </script>
 </div>
 
 <div id="tooltip-templates-container"></div>
diff --git a/web/src/ui_init.js b/web/src/ui_init.js
index 51be9e819a..a11f3b4f44 100644
--- a/web/src/ui_init.js
+++ b/web/src/ui_init.js
@@ -783,21 +783,21 @@ $(async () => {
             }),
             client_gravatar: false,
         };
-        const {result, msg, ...state} = await new Promise((resolve, reject) => {
-            channel.post({
-                url: "/json/register",
-                data,
-                success: resolve,
-                error(xhr) {
-                    blueslip.error("Spectator failed to register", {
-                        status: xhr.status,
-                        body: xhr.responseText,
-                    });
-                    reject(new Error("Spectator failed to register"));
-                },
-            });
+        channel.post({
+            url: "/json/register",
+            data,
+            success(response_data) {
+                Object.assign(page_params, response_data);
+                initialize_everything();
+            },
+            error() {
+                $("#app-loading-middle-content").hide();
+                $("#app-loading-bottom-content").hide();
+                $(".app").hide();
+                $("#app-loading-error").css({visibility: "visible"});
+            },
         });
-        Object.assign(page_params, state);
+    } else {
+        initialize_everything();
     }
-    initialize_everything();
 });