added busy indicator

css/index.css

@@ -0,0 +1,16 @@
+/*
+ * 
+ */
+
+ .opacity-animated {
+    -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
+    transition: opacity 1s;
+    -webkit-transition: padding-top 1s; /* For Safari 3.1 to 6.0 */
+    transform: scale(1);
+    transition: 1s all ease;
+  }
+  
+  .flexFont {
+    height:100%;
+    width:100%;
+  }

index.html

@@ -13,6 +13,25 @@
     integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/offcanvas/">
 
+    <!-- Custom styles for this template -->
+    <link href="css/index.css" rel="stylesheet">
+
+  <style>
+    .bd-placeholder-img {
+      font-size: 1.125rem;
+      text-anchor: middle;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+    }
+
+    @media (min-width: 768px) {
+      .bd-placeholder-img-lg {
+        font-size: 3.5rem;
+      }
+    }
+  </style>
   <!-- Custom styles for this template -->
   <link href="css/offcanvas.css" rel="stylesheet">
   <link href="css/dashboard.css" rel="stylesheet">
@@ -31,11 +50,7 @@
     </ul>
   </nav>
 
-<<<<<<< Updated upstream
   <main role="main" class="container" style="padding-top: 30px;">
-=======
-  <main class="container" style="margin-top: 50px;">
->>>>>>> Stashed changes
     <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-blue rounded shadow-sm">
       <img class="mr-3" src="img/icon.png" alt="" width="48" height="48">
       <div class="lh-100">
@@ -46,22 +61,32 @@
 
     <div class="my-3 p-3 bg-white rounded shadow-sm">
       <h6 class="border-bottom border-gray pb-2 mb-0">current places</h6>
+<<<<<<< HEAD
 <<<<<<< Updated upstream
       <div id="locationsList">
         <div class="media text-muted pt-3">
+
+      <div id="loader" class="opacity-animated" style="padding-left: 50%; padding-top:15px; opacity: 1;">
+        <div class="spinner-border" role="status">
+          <span class="sr-only">Loading...</span>
+        </div>
+      </div>
+
+      <div id="locationsList" class="opacity-animated">
+        <!--div class="media text-muted pt-3">
+        <div class="spinner-border" role="status">
+          <span class="sr-only">Loading...</span>
+        </div>
+      </div>
+
+      <div id="locationsList" class="opacity-animated">
+        <!--div class="media text-muted pt-3">
           <svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" src="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32">
             <rect width="100%" height="100%" fill="#007bff" /><text x="50%" y="50%" fill="#007bff"
               dy=".3em">32x32</text>
           </svg>
           <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
             <strong class="d-block text-gray-dark">
-=======
-
-      <div class="media text-muted pt-3">
-        <a href="dashboard.html"><img class="mr-2" src="img/icons/1.png" width="50" height="50" alt="">
-          <p class="media-body pb-3 mb-0 lh-125 border-bottom border-gray">
-            <strong class="d-block">
->>>>>>> Stashed changes
               <a href="dashboard.html">Stuttgart-Vaihingen</a>
             </strong>
             Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
@@ -72,7 +97,7 @@
         <div class="media text-muted pt-3">
           <!--  <svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg"
           preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32">
-          -->
+          --
           <img src="img/icons/twister.png" width="32" height="32" alt="icon">
 
           <title>Placeholder</title>
@@ -97,6 +122,7 @@
             Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
             condimentum nibh, ut fermentum massa justo sit amet risus.
           </p>
+<<<<<<< HEAD
         </div>
 =======
       </div>
@@ -111,18 +137,7 @@
           Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
           condimentum nibh, ut fermenerwrwrwetum massa justo sit amet risus.
         </p>
-      </div>
+        </div-->
-
-      <div class="media text-muted pt-3">
-        <a href="dashboard.html"><img class="mr-2" src="img/icons/6.png" width="50" height="50" alt=""></a>
-        <p class="media-body pb-3 mb-0 lh-125 border-bottom border-gray">
-          <strong class="d-block">
-            <a href="dashboard.html">@place</a>
-          </strong>
-          Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
-          condimentum nibh, ut fermentum massa justo sit amet risus.
-        </p>
->>>>>>> Stashed changes
       </div>
 
     </div>
@@ -137,12 +152,9 @@
   <script src="js/blueweather.js"></script>
   <script src="js/index.js"></script>
 </body>
-<<<<<<< Updated upstream
 
 
 </body>
 
 
-=======
->>>>>>> Stashed changes
 </html>

js/index.js

@@ -10,6 +10,12 @@ class BlueWeatherIndex {
     }
 
     loadLocations () {
+            // page: -1 for dashboard or sensor id
+    var mainContent = document.getElementById('locationsList')
+    var loader = document.getElementById('loader')
+
+    mainContent.style = "opacity: 0;"
+    loader.style = "padding-left: 50%; padding-top:15px; opacity: 1; width:0;"
         this.blueweather.getLocations(true, function(locations) {
             var locationsList = document.getElementById("locationsList")
             locationsList.innerHTML = ""
@@ -41,6 +47,10 @@ class BlueWeatherIndex {
                 locLocationLink.innerHTML = "View on map"
 
             }
+
+            loader.style = "padding-left: 50%; padding-top:0px; opacity: 0; width:0; height:0;"
+            mainContent.classList.add("opacity-animated");
+            mainContent.style = "opacity: 1;"
         })
     }
 }