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 }}">