From 25a1bf66d93db4f7208831ec3f9321be290c90b6 Mon Sep 17 00:00:00 2001
From: Starbeamrainbowlabs <sbrl@starbeamrainbowlabs.com>
Date: Sun, 30 Jun 2019 18:11:36 +0100
Subject: [PATCH] Add loading animation while we're bringing in the overlay &
 device markers

---
 README.md                                  |  4 ++++
 client_src/css/images/spinning-circles.svg |  2 ++
 client_src/css/main.css                    | 13 +++++++++++++
 client_src/index.html                      |  2 +-
 client_src/js/MapManager.mjs               |  3 ++-
 5 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 client_src/css/images/spinning-circles.svg

diff --git a/README.md b/README.md
index 6927d7b..d69ba67 100644
--- a/README.md
+++ b/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.
diff --git a/client_src/css/images/spinning-circles.svg b/client_src/css/images/spinning-circles.svg
new file mode 100644
index 0000000..da3c2df
--- /dev/null
+++ b/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>
diff --git a/client_src/css/main.css b/client_src/css/main.css
index 9730922..140c840 100644
--- a/client_src/css/main.css
+++ b/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;
+}
diff --git a/client_src/index.html b/client_src/index.html
index b0e2c8e..af6e8ee 100644
--- a/client_src/index.html
+++ b/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>
 		
diff --git a/client_src/js/MapManager.mjs b/client_src/js/MapManager.mjs
index 1b897a9..89d2a6f 100644
--- a/client_src/js/MapManager.mjs
+++ b/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....");
