update the connection button at every connection change

comms.js

@@ -63,5 +63,21 @@ setTime : () => {
       resolve();
     });
   });
+},
+watchConnectionChange : cb => {
+  var connected = Puck.isConnected();
+
+  //TODO Switch to an event listener when Puck will support it
+  var interval = setInterval(() => {
+    if (connected === Puck.isConnected()) return;
+
+    connected = Puck.isConnected();
+    cb(connected);
+  }, 1000);
+
+  //stop watching
+  return () => {
+    clearInterval(interval);
+  };
 }
 };

index.html

@@ -36,7 +36,7 @@
         <!-- <a href="#" class="btn btn-link">...</a> -->
       </section>
       <section class="navbar-section">
-        <button class="btn" id="connectmydevice" style="text-align: right;">Connect</button>
+        <button class="btn" id="connectmydevice">Connect</button>
       </section>
       <!--<section class="navbar-section">
         <div class="input-group input-inline">

index.js

@@ -247,14 +247,12 @@ function refreshMyApps() {
   });
 }
 
-var connectMyDeviceBtn = document.getElementById("connectmydevice");
-
 function getInstalledApps() {
   showLoadingIndicator();
   // Get apps
   Comms.getInstalledApps().then(appIDs => {
     appsInstalled = appIDs;
-    connectMyDeviceBtn.style.display = 'none';
+    handleConnectionChange(true);
     refreshMyApps();
     refreshLibrary();
   }).catch(err => {
@@ -262,8 +260,15 @@ function getInstalledApps() {
   });
 }
 
+var connectMyDeviceBtn = document.getElementById("connectmydevice");
+
+function handleConnectionChange(connected) {
+  connectMyDeviceBtn.style.display = connected ? 'none' : '';
+}
+
 document.getElementById("myappsrefresh").addEventListener("click", getInstalledApps);
 connectMyDeviceBtn.addEventListener("click", getInstalledApps);
+Comms.watchConnectionChange(handleConnectionChange);
 
 // =========================================== About