Display a loading message instead of blank page
This commit is contained in:
parent
e8cc465228
commit
85a536726f
@ -43,7 +43,22 @@
|
|||||||
</footer>
|
</footer>
|
||||||
<div id="main">
|
<div id="main">
|
||||||
<div id="windows">
|
<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 id="sign-in" class="window">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<button class="lt" aria-label="Toggle channel list"></button>
|
<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() {
|
$(function() {
|
||||||
|
$("#loading-page-message").text("Connecting…");
|
||||||
|
|
||||||
var path = window.location.pathname + "socket.io/";
|
var path = window.location.pathname + "socket.io/";
|
||||||
var socket = io({path: path});
|
var socket = io({path: path});
|
||||||
var commands = [
|
var commands = [
|
||||||
@ -77,10 +79,6 @@ $(function() {
|
|||||||
socket.on("auth", function(data) {
|
socket.on("auth", function(data) {
|
||||||
var body = $("body");
|
var body = $("body");
|
||||||
var login = $("#sign-in");
|
var login = $("#sign-in");
|
||||||
if (!login.length) {
|
|
||||||
refresh();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
login.find(".btn").prop("disabled", false);
|
login.find(".btn").prop("disabled", false);
|
||||||
|
|
||||||
@ -96,6 +94,7 @@ $(function() {
|
|||||||
} else {
|
} else {
|
||||||
var token = window.localStorage.getItem("token");
|
var token = window.localStorage.getItem("token");
|
||||||
if (token) {
|
if (token) {
|
||||||
|
$("#loading-page-message").text("Authorizing…");
|
||||||
socket.emit("auth", {token: token});
|
socket.emit("auth", {token: token});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -18,6 +18,10 @@ BORDERS #2a323d
|
|||||||
QUIT #d0907d
|
QUIT #d0907d
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
#main,
|
#main,
|
||||||
#chat .sidebar,
|
#chat .sidebar,
|
||||||
#windows .chan,
|
#windows .chan,
|
||||||
@ -34,12 +38,6 @@ QUIT #d0907d
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#settings,
|
|
||||||
#sign-in,
|
|
||||||
#connect {
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
#chat .count {
|
#chat .count {
|
||||||
background-color: #2e3642;
|
background-color: #2e3642;
|
||||||
}
|
}
|
||||||
|
@ -20,6 +20,7 @@ QUIT #bc6c4c
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
background: #2b2b2b;
|
background: #2b2b2b;
|
||||||
|
color: #dcdccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main,
|
#main,
|
||||||
@ -38,12 +39,6 @@ body {
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#settings,
|
|
||||||
#sign-in,
|
|
||||||
#connect {
|
|
||||||
color: #dcdccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
#settings,
|
#settings,
|
||||||
#sign-in,
|
#sign-in,
|
||||||
#connect .title {
|
#connect .title {
|
||||||
|
Loading…
Reference in New Issue
Block a user