From 048a5c25a79e17af28e7f0fc5060572c2763d255 Mon Sep 17 00:00:00 2001
From: Starbeamrainbowlabs <sbrl@starbeamrainbowlabs.com>
Date: Fri, 26 Jul 2019 15:05:16 +0100
Subject: [PATCH] Add loading animation

---
 README.md                                  |  7 +++++++
 client_src/css/images/spinning-circles.svg |  2 ++
 client_src/css/index.css                   | 17 +++++++++++++++++
 client_src/js/MapManager.mjs               |  3 +++
 4 files changed, 29 insertions(+)
 create mode 100644 client_src/css/images/spinning-circles.svg

diff --git a/README.md b/README.md
index f5c3d60..9aaf646 100644
--- a/README.md
+++ b/README.md
@@ -29,5 +29,12 @@ Run `bash ./build setup` from the command line at the root of this repository.
  - Create `settings.toml` in the root of the repository if it doesn't exist already.
  - Review `server/settings.default.toml` and adjust `settings.toml` to fill in the values for the required fields, not forgetting the encryption key generated when setting up the IoT device.
 
+### Client-side web interface
+
+
+## Credits
+ - AI: [TensorFlow.js](https://www.tensorflow.org/js/)
+ - [Loading Animation](https://github.com/SamHerbert/SVG-Loaders)
+
 ## Useful Links
  - Entropy extraction from the watchdog timer vs the internal clock: https://github.com/taoyuan/Entropy
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/index.css b/client_src/css/index.css
index a5d9446..c75d013 100644
--- a/client_src/css/index.css
+++ b/client_src/css/index.css
@@ -42,3 +42,20 @@ main {
 	
 	z-index: 50;
 }
+
+
+.working { cursor: progress !important; }
+
+.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;
+    
+    cursor: progress !important;
+    pointer-events: none;
+}
diff --git a/client_src/js/MapManager.mjs b/client_src/js/MapManager.mjs
index a1328b1..6ef9d5f 100644
--- a/client_src/js/MapManager.mjs
+++ b/client_src/js/MapManager.mjs
@@ -13,6 +13,7 @@ class MapManager {
 	}
 	
 	async setup() {
+		document.querySelector("main").classList.add("working", "working-visual");
 		this.map = L.map("map", {
 			fullscreenControl: true
 		});
@@ -34,6 +35,8 @@ class MapManager {
 		await this.layer_ai.setup();
 		
 		this.setup_layer_control();
+		
+		document.querySelector("main").classList.remove("working", "working-visual");
 	}
 	
 	setup_layer_control() {
