www.spaceplanner.app

Web client to the spaceplanner API
git clone git://jacobedwards.org/www.spaceplanner.app
Log | Files | Refs

commit 7537444f415703d88f9264677cb405a9a227b796
parent 1c1faa401f8c24491b2013e44f1c21ccd88f9722
Author: Jacob R. Edwards <jacob@jacobedwards.org>
Date:   Thu, 17 Oct 2024 00:41:45 -0700

Add loading feedback to editor

At various points during the loading process a status update is
issued using the new ui.wait() function to give an idea of the
different stages and show that things are happening.  This is mostly
for slow network connections when the scripts aren't cached yet.

Also add a <noscript> error message.

Diffstat:
Mfiles/floorplans/floorplan/index.html | 10++++++++++
Mfiles/floorplans/floorplan/main.js | 5+++++
2 files changed, 15 insertions(+), 0 deletions(-)

diff --git a/files/floorplans/floorplan/index.html b/files/floorplans/floorplan/index.html @@ -10,6 +10,16 @@ <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1"> </head> <body> + <noscript><p class="error">Unfortunately JavaScript must be enabled for this to function.</p></noscript> + + <!-- + -- Inlined it here because there's a lot of module + -- scripts to be fetched before they can run (and I'm + -- not sure if one can start running before they're + -- all loaded or not + --> + <div id="wait">Loading scripts...</div> + <section id="editor"> <header> <h1 class="fp_name">Floorplan</h1> diff --git a/files/floorplans/floorplan/main.js b/files/floorplans/floorplan/main.js @@ -72,6 +72,8 @@ const escapeEvent = new Event("escape") etc.handle_wrap(init) function init() { + ui.wait("Loading data...") + let floorplan_id = (new URLSearchParams(new URL(document.URL).search)).get("id") if (!floorplan_id) { document.location.href = "/floorplans" @@ -140,6 +142,8 @@ function init() { } function run(editor) { + ui.wait("Initializing editor...") + editor.useUnits("imperial") editor.draw.hide() @@ -236,6 +240,7 @@ function run(editor) { editor.draw.show() editor.backend.pull() .then(function() { + ui.wait() if (editor.draw.findExactlyOne("#points").children().length === 0) { editor.addPoint({ x: 0, y: 0 }) }