www.spaceplanner.app

commit 1c1faa401f8c24491b2013e44f1c21ccd88f9722
parent dfaecc9a164e3230354416bc52cb3285b8044417
Author: Jacob R. Edwards <jacob@jacobedwards.org>
Date:   Thu, 17 Oct 2024 00:34:50 -0700

Make an interface for giving user loading feedback

It's just a trivial function wait() which replaces the content of
the #wait element with a new message, or deletes it if called with
a null-ish message.

Diffstat:
M
files/css/main.css
 | 
16
++++++++++++++++
M
files/lib/ui.js
 | 
17
+++++++++++++++++
M
files/services/main.css
 | 
5
-----
M
files/services/main.js
 | 
7
+++----

4 files changed, 36 insertions(+), 9 deletions(-)
diff --git a/files/css/main.css b/files/css/main.css
@@ -176,3 +176,19 @@ a.pop {
 dd, p {
 	max-width: 65ch;
 }
+
+#wait {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100vw;
+	height: 2em;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	background-color: rgba(0, 0, 0, .8);
+	backdrop-filter: blur(1px);
+        color: white;
+}
diff --git a/files/lib/ui.js b/files/lib/ui.js
@@ -235,3 +235,20 @@ export function warning(content) {
 
 	return warning
 }
+
+export function wait(content) {
+	let wait = document.getElementById("wait")
+	if (!content) {
+		wait.remove()
+	}
+
+	if (!wait) {
+		wait = document.body.appendChild(document.createElement("div"))
+		wait.id = "wait"
+	}
+
+	if (typeof content === "string") {
+		content = document.createTextNode(content)
+	}
+	wait.replaceChildren(content)
+}
diff --git a/files/services/main.css b/files/services/main.css
@@ -16,11 +16,6 @@ body {
 	text-align: center;
 }
 
-#wait {
-	color: lightgrey;
-	text-align: center;
-}
-
 .service {
 	background-color: #FBFBFB;
 	border: thin ridge grey;
diff --git a/files/services/main.js b/files/services/main.js
@@ -1,12 +1,11 @@
 import * as etc from "/lib/etc.js"
 import * as api from "/lib/api.js"
+import * as ui from "/lib/ui.js"
 
 etc.handle_wrap(main)
 
 function main() {
-	let wait = document.body.appendChild(document.createElement("p"))
-	wait.appendChild(document.createTextNode("Please wait..."))
-	wait.id = "wait"
+	ui.wait("Please wait...")
 
 	etc.userService()
 		.then(function(service) {
@@ -21,7 +20,7 @@ function main() {
 							for (let service in services) {
 								addService(services[service])
 							}
-							wait.remove()
+							ui.wait()
 							document.getElementById("services")
 								.removeAttribute("hidden", false)
 						}