From 6ec4bd5ba6a9f5c6b022869b376fb973d028382c Mon Sep 17 00:00:00 2001
From: th <58441256+sedsedus@users.noreply.github.com>
Date: Wed, 26 Jun 2024 21:27:37 +0200
Subject: [PATCH] Reintroduce the loading spinner (#107)

## Context / before
- The loading spinner (and loading text) were removed in
d12c19da37de943d06703bec09613cf7121a70f9
- If `WebRunner::start` fails nothing is shown in HTML, the user has to
open the console to see if something happened (a.k.a. halting problem)

## What changed / now
- before the canvas is loaded a CSS loading spinner with "Loading..."
text is displayed
- if the loading fails, "the app has crashed" text is shown instead
  - still `panic!` in this case (as it did)
- the corresponding div is removed after loading  successfully completes


## How does it look

![image](https://github.com/emilk/eframe_template/assets/58441256/012ef5ec-3e3a-48ca-8971-5fb0afcad738)

![image](https://github.com/emilk/eframe_template/assets/58441256/c2ed1dc9-eec8-4bd5-b134-9a7cf6ab72e5)

## What exactly changed
- introduce dependency to `web-sys`
- add the `loading_text` div that shows the spinner text during loading,
or error if loading fails
- access the DOM (in `main.rs`) after the app has been loaded, and
remove the spinner, or show an error
- if we fail to locate `loading_text` (like when someone removes the div
from `index.html`) - nothing happens

## Discussion
- I wanted to avoid dependency on `web-sys`, but, I don't see any other
simple way to access the spinner
- Another idea I had was to do it straight from the `js` side (like it
was before), however, I don't see a way to receive events from
`WebRunner`
- If this solution is undesired, I think the CSS remnants of the spinner
[should be
removed](https://github.com/emilk/eframe_template/compare/master...sedsedus:eframe_template:remove-left-over-css)
(like `lds-dual-ring`)

## Alternative solution
A more thorough solution (in `main.rs`) is
https://github.com/emilk/eframe_template/compare/master...sedsedus:eframe_template:fix-css-spinner-install-hook,
where all panics are caught to show HTML error.
I encountered this myself, where I would mistype the canvas id and wait
a few seconds wondering why the app doesn't load, only to discover in
the console that something failed.
This is more thorough (but at the same time a little more complex / less
clean due to hook insertion) because this "invalid canvas id error"
wouldn't get caught by the proposal in this PR

---------

Co-authored-by: Emil Ernerfeldt <emil.ernerfeldt@gmail.com>
---
 Cargo.lock  |  1 +
 Cargo.toml  |  3 +++
 index.html  |  9 ++++++++-
 src/main.rs | 21 ++++++++++++++++++---
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 320bb992..ffdccef6 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -877,6 +877,7 @@ dependencies = [
  "log",
  "serde",
  "wasm-bindgen-futures",
+ "web-sys",
 ]
 
 [[package]]
diff --git a/Cargo.toml b/Cargo.toml
index 18edebdb..601b4753 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -31,6 +31,9 @@ env_logger = "0.10"
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 wasm-bindgen-futures = "0.4"
 
+# to access the DOM (to hide the loading text)
+[target.'cfg(target_arch = "wasm32")'.dependencies.web-sys]
+version = "0.3.4"
 
 [profile.release]
 opt-level = 2 # fast and small wasm
diff --git a/index.html b/index.html
index 872b4f4c..154800de 100644
--- a/index.html
+++ b/index.html
@@ -114,7 +114,6 @@
                 transform: rotate(360deg);
             }
         }
-
     </style>
 </head>
 
@@ -123,6 +122,14 @@
     <!-- the id is hardcoded in main.rs . so, make sure both match. -->
     <canvas id="the_canvas_id"></canvas>
 
+    <!-- the loading spinner will be removed in main.rs -->
+    <div class="centered" id="loading_text">
+        <p style="font-size:16px">
+            Loading…
+        </p>
+        <div class="lds-dual-ring"></div>
+    </div>
+
     <!--Register Service Worker. this will cache the wasm / js scripts for offline use (for PWA functionality). -->
     <!-- Force refresh (Ctrl + F5) to load the latest files instead of cached files  -->
     <script>
diff --git a/src/main.rs b/src/main.rs
index 83e1f424..8297f36b 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -33,13 +33,28 @@ fn main() {
     let web_options = eframe::WebOptions::default();
 
     wasm_bindgen_futures::spawn_local(async {
-        eframe::WebRunner::new()
+        let start_result = eframe::WebRunner::new()
             .start(
                 "the_canvas_id", // hardcode it
                 web_options,
                 Box::new(|cc| Box::new(eframe_template::TemplateApp::new(cc))),
             )
-            .await
-            .expect("failed to start eframe");
+            .await;
+        let loading_text = web_sys::window()
+            .and_then(|w| w.document())
+            .and_then(|d| d.get_element_by_id("loading_text"));
+        match start_result {
+            Ok(_) => {
+                loading_text.map(|e| e.remove());
+            }
+            Err(e) => {
+                loading_text.map(|e| {
+                    e.set_inner_html(
+                        "<p> The app has crashed. See the developer console for details. </p>",
+                    )
+                });
+                panic!("failed to start eframe: {e:?}");
+            }
+        }
     });
 }