Reintroduce the loading spinner

Cargo.toml

@@ -27,6 +27,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

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>

src/main.rs

@@ -23,13 +23,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:?}");
+            }
+        }
     });
 }