Add loading message

public/client.html

@@ -38,6 +38,7 @@
             </div>
           </div>
         </div>
+        <div class = "loading" id="loading">Loading...</div>
         <div class = "static-bar">
           <div class = "shift-toggle static-key"> shift </div> 
           <div class = "ctrl-toggle static-key"> ctrl </div> 

public/js/client.js

@@ -218,7 +218,7 @@ socket.on('updateKeys', function(newVals) {
       ele.text(newVals.k[i])
       ele.css({position:'absolute', left:newVals.x[i] + '%', top:(newVals.y[i]) + '%', minHeight: (keyboardWidth*.02).toString() + "px"});
     }
-    $('#loading').html('');
+    $('#loading').hide();
   });
 
 //Purpose: Receives information from the server to update the presentation of the keys on the client
@@ -227,7 +227,6 @@ socket.on('updateUrls', function(newVals) {
     for (var i = 0; i < newVals.x.length; i++){
       addHotkey(newVals.x[i], newVals.y[i], newVals.k[i], 'hotkeys', 'hotkeys-button' + (i+1).toString())
     }
-    $('#loading').html('');
   });
 
 //Purpose: Receives information from the server to update the presentation of the keys on the client
@@ -240,7 +239,6 @@ socket.on('updateNumPad', function(newVals) {
       ele.css({position:'absolute', left:newVals.x[i] + '%', top:(newVals.y[i]) + '%', minHeight: (keyboardWidth*.02).toString() + "px"});
 
     }
-    $('#loading').html('');
   });
 
 //Purpose: Receives information from the server to update the presentation of the keys on the client
@@ -264,7 +262,6 @@ socket.on('updateCustom', function(newVals) {
     }
     customButtonCounts['custom-' + customCount.toString()] = newVals.x.length;
     customCount++;
-    $('#loading').html('');
   });
 
 

public/style/main.css

@@ -9,6 +9,14 @@ mark {
     display: none;
 }
 
+.loading {
+  text-align: center;
+  font-size: 200%;
+  vertical-align: middle;
+  height: 20%;
+  background-color: white;
+}
+
 .draggable {
 
   /*Button Positioning and Size*/