Merge pull request #386 from thelounge/xpaw/loader

Display a loading message instead of blank page

client/index.html

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

client/js/loading-slow-alert.js

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

client/js/lounge.js

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

client/themes/morning.css

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

client/themes/zenburn.css

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