Display a loading message instead of blank page
This commit is contained in:
parent
e8cc465228
commit
85a536726f
@ -43,7 +43,22 @@
|
||||
</footer>
|
||||
<div id="main">
|
||||
<div id="windows">
|
||||
<div id="chat"></div>
|
||||
<div id="chat">
|
||||
<div class="window" style="display:block">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<h2 class="title">The Lounge is loading…</h2>
|
||||
</div>
|
||||
<div class="col-xs-12">
|
||||
<p id="loading-page-message">Loading the app… <a href="http://enable-javascript.com/" target="_blank">Make sure to have JavaScript enabled.</a></p>
|
||||
<p id="loading-slow" style="display:none">This is taking longer than it should, there might be connectivity issues.</p>
|
||||
<script async src="js/loading-slow-alert.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sign-in" class="window">
|
||||
<div class="header">
|
||||
<button class="lt" aria-label="Toggle channel list"></button>
|
||||
|
14
client/js/loading-slow-alert.js
Normal file
14
client/js/loading-slow-alert.js
Normal file
@ -0,0 +1,14 @@
|
||||
/*
|
||||
* This is a separate file for two reasons:
|
||||
* 1. CSP policy does not allow inline javascript
|
||||
* 2. It has to be a small javascript executed before all other scripts,
|
||||
* so that the timeout can be triggered while slow JS is loading
|
||||
*/
|
||||
|
||||
setTimeout(function() {
|
||||
var element = document.getElementById("loading-slow");
|
||||
|
||||
if (element) {
|
||||
element.style.display = "block";
|
||||
}
|
||||
}, 5000);
|
@ -1,4 +1,6 @@
|
||||
$(function() {
|
||||
$("#loading-page-message").text("Connecting…");
|
||||
|
||||
var path = window.location.pathname + "socket.io/";
|
||||
var socket = io({path: path});
|
||||
var commands = [
|
||||
@ -77,10 +79,6 @@ $(function() {
|
||||
socket.on("auth", function(data) {
|
||||
var body = $("body");
|
||||
var login = $("#sign-in");
|
||||
if (!login.length) {
|
||||
refresh();
|
||||
return;
|
||||
}
|
||||
|
||||
login.find(".btn").prop("disabled", false);
|
||||
|
||||
@ -96,6 +94,7 @@ $(function() {
|
||||
} else {
|
||||
var token = window.localStorage.getItem("token");
|
||||
if (token) {
|
||||
$("#loading-page-message").text("Authorizing…");
|
||||
socket.emit("auth", {token: token});
|
||||
}
|
||||
}
|
||||
|
@ -18,6 +18,10 @@ BORDERS #2a323d
|
||||
QUIT #d0907d
|
||||
*/
|
||||
|
||||
body {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
#main,
|
||||
#chat .sidebar,
|
||||
#windows .chan,
|
||||
@ -34,12 +38,6 @@ QUIT #d0907d
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#settings,
|
||||
#sign-in,
|
||||
#connect {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
#chat .count {
|
||||
background-color: #2e3642;
|
||||
}
|
||||
|
@ -20,6 +20,7 @@ QUIT #bc6c4c
|
||||
|
||||
body {
|
||||
background: #2b2b2b;
|
||||
color: #dcdccc;
|
||||
}
|
||||
|
||||
#main,
|
||||
@ -38,12 +39,6 @@ body {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#settings,
|
||||
#sign-in,
|
||||
#connect {
|
||||
color: #dcdccc;
|
||||
}
|
||||
|
||||
#settings,
|
||||
#sign-in,
|
||||
#connect .title {
|
||||
|
Loading…
Reference in New Issue
Block a user