Web: show the SolidCraft mark being cut from a cube while loading (#1908)

Thanks @shuff57.

apps/solidcraft-web/src/main.rs

@@ -31,6 +31,31 @@ mod web {
     /// draws it with reversed depth, whose precision follows the distance from the eye (#1434).
     const DEPTH_BITS: u8 = 32;
 
+    /// The loading animation (assets/styles/web/loading-logo.svg) settles into the finished mark
+    /// about 3.2 s after the page starts; this adds a short hold. The app doesn't land before it.
+    const LOADING_MIN_MS: f64 = 3600.0;
+    /// The fade from the loading screen into the app.
+    const LOADING_FADE_MS: i32 = 300;
+
+    /// Take the loading screen away once the animation has played to the finished mark: wait out
+    /// what is left of `LOADING_MIN_MS`, fade it, then remove it.
+    fn dismiss_loading(el: web_sys::Element) {
+        let Some(window) = web_sys::window() else {
+            el.remove();
+            return;
+        };
+        let now = window.performance().map_or(LOADING_MIN_MS, |p| p.now());
+        let wait = (LOADING_MIN_MS - now).max(0.0) as i32;
+        let fade = wasm_bindgen::closure::Closure::once_into_js(move || {
+            let _ = el.set_attribute("class", "done");
+            let gone = wasm_bindgen::closure::Closure::once_into_js(move || el.remove());
+            if let Some(window) = web_sys::window() {
+                let _ = window.set_timeout_with_callback_and_timeout_and_arguments_0(gone.unchecked_ref(), LOADING_FADE_MS);
+            }
+        });
+        let _ = window.set_timeout_with_callback_and_timeout_and_arguments_0(fade.unchecked_ref(), wait);
+    }
+
     /// Seconds between autosaves of unsaved work.
     const AUTOSAVE_S: f64 = 30.0;
 
@@ -534,7 +559,7 @@ mod web {
                 .await;
             if let Some(el) = document.get_element_by_id(LOADING_ID) {
                 match result {
-                    Ok(()) => el.remove(),
+                    Ok(()) => dismiss_loading(el),
                     Err(e) => {
                         el.set_inner_html(&format!("<p>SolidCraft failed to start: {e:?}</p><p>A browser with WebGPU or WebGL2 is required.</p>"))
                     }