Indeterminate loading bar is shown while connecting to stream

- This closes #37

index.html

@@ -65,8 +65,9 @@
                 <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" id="quitGameButton">Quit Current Game</button>
             </div>
 
-            <div id="listener">
-            </div>
+            <div id="listener"></div> <!-- NaCl module placeholder.  NaCl gets thrown into here -->
+
+            <div id="loadingSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
         </main>
     </div>
     <script defer src="static/js/jquery-2.2.0.min.js"></script>

static/css/style.css

@@ -18,6 +18,15 @@
     padding: 20px 24px 24px 24px;
     color: rgba(0,0,0, 0.54); 
 }
+#loadingSpinner {
+    display: none;
+    z-index: 1;
+    position: fixed;
+    left: 50%;
+    bottom: 20px;
+    transform: translate(-50%, -50%);
+    margin: 0 auto;
+}
 main {
     padding: 50px 100px;
 }

static/js/index.js

@@ -240,7 +240,7 @@ function showApps() {
 function showAppsMode() {
     console.log("entering show apps mode.");
     $(".mdl-layout__header").show();
-    $("#main-content").children().not("#listener").show();
+    $("#main-content").children().not("#listener, #loadingSpinner").show();
     $("#main-content").removeClass("fullscreen");
     $("#listener").removeClass("fullscreen");
     $("body").css('backgroundColor', 'white');
@@ -345,13 +345,15 @@ function continueReplaceApp() {
 function playGameMode() {
     console.log("entering play game mode");
     $(".mdl-layout__header").hide();
-    $("#main-content").children().not("#listener").hide();
+    $("#main-content").children().not("#listener, #loadingSpinner").hide();
     $("#main-content").addClass("fullscreen");
     $("#listener").addClass("fullscreen");
     fullscreenNaclModule();
     $("body").css('backgroundColor', 'black');
 
     chrome.app.window.current().fullscreen();
+    $('#loadingSpinner').css('display', 'inline-block');
+
 }
 
 // Maximize the size of the nacl module by scaling and resizing appropriately

static/js/messages.js

@@ -25,6 +25,8 @@ function handleMessage(msg) {
                 showAppsMode();
                 chrome.app.window.current().restore();
             });
+        } else if(msg.data === 'Connection Established') {
+            $('#loadingSpinner').css('display', 'none');
         }
     }
 }