added a loader/spinner while data loads

seadssite/static/css/dashboard.css

@@ -9,6 +9,25 @@
 .page {
    display: none;
 }
+#loader {
+    border: 16px solid #f3f3f3; /* Light grey */
+    border-top: 16px solid #3498db; /* Blue */
+    border-radius: 50%;
+    position: absolute;
+    margin: auto;
+    top: -400; left: 0; bottom: 0; right: 0;
+   /* display: block;*/
+    width: 120px;
+    height: 120px;
+    animation: spin 1s linear infinite;
+    z-index: 10;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
 
 #graphs_page {
    display: inline;

seadssite/static/js/device.js

@@ -183,6 +183,7 @@ var app = function () {
                 })
             }
         });
+        document.getElementById("loader").style.display = "none"
         return result;
     }
 

seadssite/templates/device.html

@@ -31,6 +31,7 @@ <h1>Please sign in to continue</h1>
             })
         </script>
     {% else %}
+        <div id="loader"></div>
         <div id="vue-div" style="display: hidden;">
             <div id="manage-bar" class="manage-bar navbar navbar-fixed-left">
                 <div id="sead-logo" class="">