Add loading message

client-data/board.css

@@ -1,14 +1,39 @@
 html, body, svg {
 	padding:0;
 	margin:0;
+	font-family: Liberation sans, sans-serif;
 }
 
 #canvas {
 	transform-origin: 0 0;
 }
 
+#loadingMessage {
+	font-size: 1.5em;
+	background: #3339 linear-gradient( #C4DFFF, #8FA2BC);
+	padding: 20px;
+	width: 40%;
+	line-height: 50px;
+	text-align: center;
+	border-radius: 10px;
+	position:fixed;
+	top: 40%;
+	left: 30%;
+	z-index: 1;
+	box-shadow: 0 0 2px black;
+	transition: 1s;
+}
+
+#loadingMessage.hidden {
+	opacity: 0;
+	z-index: -1;
+}
+
+#loadingMessage::after {
+	content: "...";
+}
+
 #menu {
-	font-family: Liberation sans, sans-serif;
 	font-size: 16px;
 	border-radius:0;
 	overflow:hidden;

client-data/board.html

@@ -26,6 +26,8 @@
 	</svg>
 </div>
 
+<div id="loadingMessage">{{translate translations 'Loading'}}</div>
+
 <div id="menu">
 	<div id="menuItems">
 		<ul id="tools" class="tools">

client-data/js/board.js

@@ -196,26 +196,36 @@ function messageForTool(message) {
 // Apply the function to all arguments by batches
 function batchCall(fn, args) {
 	var BATCH_SIZE = 1024;
-	if (args.length > 0) {
+	if (args.length === 0) {
+		return Promise.resolve();
+	} else {
 		var batch = args.slice(0, BATCH_SIZE);
 		var rest = args.slice(BATCH_SIZE);
-		for (var i = 0; i < batch.length; i++) fn(batch[i]);
-		requestAnimationFrame(batchCall.bind(null, fn, rest));
+		return Promise.all(batch.map(fn))
+			.then(function () {
+				return new Promise(requestAnimationFrame);
+			}).then(batchCall.bind(null, fn, rest));
 	}
 }
 
 // Call messageForTool recursively on the message and its children
 function handleMessage(message) {
 	//Check if the message is in the expected format
-	if (message.tool) messageForTool(message);
-	if (message._children) batchCall(handleMessage, message._children);
 	if (!message.tool && !message._children) {
 		console.error("Received a badly formatted message (no tool). ", message);
 	}
+	if (message.tool) messageForTool(message);
+	if (message._children) return batchCall(handleMessage, message._children);
+	else return Promise.resolve();
 }
 
 //Receive draw instructions from the server
-Tools.socket.on("broadcast", handleMessage);
+Tools.socket.on("broadcast", function (msg) {
+	handleMessage(msg).finally(function afterload() {
+		var loadingEl = document.getElementById("loadingMessage");
+		loadingEl.classList.add("hidden");
+	});
+});
 Tools.socket.on("reconnect", function onReconnection() {
 	Tools.socket.emit('joinboard', Tools.boardName);
 });

server/translations.json

@@ -1,5 +1,6 @@
 {
     "fr": {
+        "Loading": "Chargement",
         "Menu": "Menu",
         "Tools": "Outils",
         "Size": "Taille",
@@ -14,6 +15,7 @@
         "Click to zoom in\nPress shift and click to zoom out": "Cliquez pour zoomer\nCliquez en maintenant la touche majuscule enfoncée pour dézoomer"
     },
     "ru": {
+        "Loading": "Загрузка",
         "Menu": "Панель",
         "Tools": "Инструменты",
         "Size": "Размер",
@@ -30,6 +32,7 @@
         "keyboard shortcut": "горячая клавиша"
     },
     "zh": {
+        "Loading": "载入中",
         "Menu": "目录",
         "Tools": "工具",
         "Size": "尺寸",