Add loading animation while we're bringing in the overlay & device markers

README.md

@@ -33,5 +33,9 @@ Contributions are welcome - feel free to [open an issue](https://github.com/Conn
 
 The [issue tracker](https://github.com/ConnectedHumber/Air-Quality-Web/issues) is the place where all the tasks relating to the project are kept.
 
+## Credits
+ - Map: [Leaflet.js](https://leafletjs.com/) showing [OpenStreetMaps](https://www.openstreetmap.org/)
+ - [Loading Animation](https://github.com/SamHerbert/SVG-Loaders)
+
 ## License
 This project is licensed under the _Mozilla Public License 2.0_. The full text of this license can be found in the [LICENSE](https://github.com/ConnectedHumber/Air-Quality-Web/blob/master/LICENSE) file of this repository, along with a helpful summary of what you can and can't do provided by GitHub.

client_src/css/images/spinning-circles.svg

@@ -0,0 +1,2 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="58" height="58" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(2 1)" stroke="#1BB3E9" stroke-width="1.5"><circle cx="42.601" cy="11.462" r="5" fill-opacity="1" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="1;0;0;0;0;0;0;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="49.063" cy="27.063" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;1;0;0;0;0;0;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="42.601" cy="42.663" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;0;1;0;0;0;0;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="27" cy="49.125" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;0;0;1;0;0;0;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="11.399" cy="42.663" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;0;0;0;1;0;0;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="4.938" cy="27.063" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;0;0;0;0;1;0;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="11.399" cy="11.462" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;0;0;0;0;0;1;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="27" cy="5" r="5" fill-opacity="0" fill="#1BB3E9"><animate attributeName="fill-opacity" begin="0s" dur="1.3s" values="0;0;0;0;0;0;0;1" calcMode="linear" repeatCount="indefinite"/></circle></g></g></svg>

client_src/css/main.css

@@ -60,3 +60,16 @@ button.selected {
 }
 
 .working { cursor: progress; }
+
+.working-visual::after {
+    content: "";
+    
+    position: relative; top: 0; left: 0;
+    width: 100%; height: 100%;
+    display: block;
+    z-index: 10000;
+    
+    background: url(images/spinning-circles.svg) center center / 25% no-repeat;
+    
+    pointer-events: none;
+}

client_src/index.html

@@ -9,7 +9,7 @@
 		<h1>Air Quality Map</h1>
 		
 		<!-- Leaflet needs an id to attach to -->
-		<main id="map">
+		<main id="map" class="working-visual">
 			
 		</main>
 		

client_src/js/MapManager.mjs

@@ -52,7 +52,8 @@ class MapManager {
 		this.setup_device_markers()
 			.then(() => console.info("[map] Device markers loaded successfully."))
 			.then(this.setup_overlay.bind(this))
-			.then(this.setup_layer_control.bind(this));
+			.then(this.setup_layer_control.bind(this))
+			.then(() => document.querySelector("main").classList.remove("working-visual"));
 		
 		// Add the heatmap
 		// console.info("[map] Loading heatmap....");