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

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() { $(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});
} }
} }

View File

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

View File

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