templates: Make the Loading… message more robust.

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

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
This commit is contained in:
Anders Kaseorg 2019-09-19 21:43:04 -07:00 committed by Tim Abbott
parent 46e562f990
commit dea6889956
4 changed files with 8 additions and 3 deletions

View File

@ -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";

1
static/js/ready.js Normal file
View File

@ -0,0 +1 @@
$("#app-loading").addClass("loaded");

View File

@ -8,7 +8,7 @@ html {
touch-action: manipulation;
}
#css-loading {
#app-loading.loaded {
display: none !important; /* We are now loaded, by definition. */
}

View File

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