From dea68899560f05bc5249dd6cf701113d4769c91d Mon Sep 17 00:00:00 2001
From: Anders Kaseorg <anders@zulipchat.com>
Date: Thu, 19 Sep 2019 21:43:04 -0700
Subject: [PATCH] =?UTF-8?q?templates:=20Make=20the=20Loading=E2=80=A6=20me?=
 =?UTF-8?q?ssage=20more=20robust.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Don’t hide it until both CSS and JS have loaded.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
---
 static/js/bundles/app.js        | 3 +++
 static/js/ready.js              | 1 +
 static/styles/zulip.scss        | 2 +-
 templates/zerver/app/index.html | 5 +++--
 4 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 static/js/ready.js

diff --git a/static/js/bundles/app.js b/static/js/bundles/app.js
index c01939824f..0a57707631 100644
--- a/static/js/bundles/app.js
+++ b/static/js/bundles/app.js
@@ -231,3 +231,6 @@ import "../../styles/hotspots.scss";
 import "../../styles/night_mode.scss";
 import "../../styles/user_status.scss";
 import "../../styles/widgets.scss";
+
+// This should be last.
+import "../ready.js";
diff --git a/static/js/ready.js b/static/js/ready.js
new file mode 100644
index 0000000000..17f30f3b03
--- /dev/null
+++ b/static/js/ready.js
@@ -0,0 +1 @@
+$("#app-loading").addClass("loaded");
diff --git a/static/styles/zulip.scss b/static/styles/zulip.scss
index ef790c46b4..744b7f90af 100644
--- a/static/styles/zulip.scss
+++ b/static/styles/zulip.scss
@@ -8,7 +8,7 @@ html {
     touch-action: manipulation;
 }
 
-#css-loading {
+#app-loading.loaded {
     display: none !important; /* We are now loaded, by definition. */
 }
 
diff --git a/templates/zerver/app/index.html b/templates/zerver/app/index.html
index 3ee613d84f..0fbc41ef69 100644
--- a/templates/zerver/app/index.html
+++ b/templates/zerver/app/index.html
@@ -16,7 +16,7 @@
 <link href="/static/images/logo/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
 <link id="emoji-spritesheet" href="/static/generated/emoji/{{ emojiset }}-sprite.css" rel="stylesheet" type="text/css">
 <style>
-    #css-loading {
+    #app-loading {
     background-color: hsl(0, 0%, 100%);
     position: fixed;
     height: 100%;
@@ -24,6 +24,7 @@
     padding: 10px;
     top: 0px;
     left: 0px;
+    z-index: 9001;
     }
 
 </style>
@@ -33,7 +34,7 @@
 <div id="feedback_container" class="new-style">
 </div>
 
-<div id="css-loading">
+<div id="app-loading">
     <h3>{{ _('Loading...') }}</h3>
     <p>{% trans %}If this message does not go away, please wait a couple seconds and <a id="reload-lnk">reload</a> the page.{% endtrans %}</p>
     <script nonce="{{ csp_nonce }}">