Add loading animation

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

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/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;
+}

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() {