add separate network queue loop and indicator

index.html

@@ -30,6 +30,7 @@
             <button class="right" id="network-info-button">
               <img src="src/assets/img/outline_info_white_18dp.png" />
             </button>
+            <div id="network-indicator-dot"></div>
           </div>
 
           <div id="device-settings">

src/assets/css/index.css

@@ -182,6 +182,15 @@ a {
 #device-settings #device-settings-port {
   width: 70px;
 }
+#network-indicator-dot {
+  position: absolute;
+  left: 250px;
+  bottom: 8px;
+  background: #00ff00;
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+}
 
 /* SECOND COL */
 #all-devices {

src/device.js

@@ -320,7 +320,10 @@ function infoUpdate(device, param, value) {
 }
 module.exports.infoUpdate = infoUpdate;
 
+let $networkIndicatorDot;
+
 function heartbeat() {
+  $networkIndicatorDot = document.getElementById('network-indicator-dot');
   Object.keys(devices).forEach((deviceID) => {
     const d = devices[deviceID];
 
@@ -342,9 +345,23 @@ function heartbeat() {
       d.sendQueue.shift();
     }
   });
+  document.getElementById('network-indicator-dot').style.background = '#111';
 }
 setInterval(heartbeat, 50);
 
+function networkTick() {
+  Object.keys(devices).forEach((deviceID) => {
+    const d = devices[deviceID];
+
+    if (d.sendQueue.length > 0 && d.sendNow) {
+      d.sendNow(d.sendQueue[0]);
+      d.sendQueue.shift();
+      $networkIndicatorDot.style.background = 'green';
+    }
+  });
+}
+setInterval(networkTick, 5);
+
 function isDeviceAlreadyAdded(newDevice) {
   let deviceAlreadyAdded = false;