From 85a536726f6464b8425b8e86dbe2e712da1a3772 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Tue, 7 Jun 2016 20:56:49 +0300
Subject: [PATCH] Display a loading message instead of blank page

---
 client/index.html               | 17 ++++++++++++++++-
 client/js/loading-slow-alert.js | 14 ++++++++++++++
 client/js/lounge.js             |  7 +++----
 client/themes/morning.css       | 10 ++++------
 client/themes/zenburn.css       |  7 +------
 5 files changed, 38 insertions(+), 17 deletions(-)
 create mode 100644 client/js/loading-slow-alert.js

diff --git a/client/index.html b/client/index.html
index 71b061d3..77257141 100644
--- a/client/index.html
+++ b/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>
diff --git a/client/js/loading-slow-alert.js b/client/js/loading-slow-alert.js
new file mode 100644
index 00000000..b86b6409
--- /dev/null
+++ b/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);
diff --git a/client/js/lounge.js b/client/js/lounge.js
index fa101fd4..97abd25e 100644
--- a/client/js/lounge.js
+++ b/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});
 			}
 		}
diff --git a/client/themes/morning.css b/client/themes/morning.css
index fa99303c..600f364e 100644
--- a/client/themes/morning.css
+++ b/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;
 }
diff --git a/client/themes/zenburn.css b/client/themes/zenburn.css
index 018ac6d0..494d25a8 100644
--- a/client/themes/zenburn.css
+++ b/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 {