Display a loading message instead of blank page

This commit is contained in:
Pavel Djundik 2016-06-07 20:56:49 +03:00
parent e8cc465228
commit 85a536726f
5 changed files with 38 additions and 17 deletions

View File

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

View 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);

View File

@ -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});
}
}

View File

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

View File

@ -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 {