feat: add loading screen while waiting for wasm to build

Author: pepperoni505

examples/gauge/Components/InterfaceSample.css

@@ -5,6 +5,16 @@
   position: relative;
 }
 
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  font-size: x-large;
+  text-align: center;
+}
+
 .button {
   width: 150px;
   height: 50px;

examples/gauge/Components/InterfaceSample.tsx

@@ -6,6 +6,7 @@ import {
   MappedSubject,
   ObjectSubject,
   Subject,
+  SubscribableMapFunctions,
   VNode,
 } from "@microsoft/msfs-sdk"
 import { CancelToken } from "navigraph/auth"
@@ -39,6 +40,7 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
   private readonly outputRef = FSComponent.createRef<HTMLPreElement>()
 
   private readonly navigationDataStatus = Subject.create<NavigationDataStatus | null>(null)
+  private readonly interfaceInitialized = Subject.create(false)
 
   private cancelSource = CancelToken.source()
 
@@ -49,6 +51,18 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
 
     this.navigationDataInterface = new NavigraphNavigationDataInterface()
 
+    // Populate status when ready
+    this.navigationDataInterface.onReady(() => {
+      this.navigationDataInterface
+        .get_navigation_data_install_status()
+        .then(status => {
+          this.navigationDataStatus.set(status)
+        })
+        .catch(e => console.error(e))
+
+      this.interfaceInitialized.set(true)
+    })
+
     this.navigationDataInterface.onEvent(NavigraphEventType.DownloadProgress, data => {
       switch (data.phase) {
         case DownloadProgressPhase.Downloading:
@@ -101,48 +115,54 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
 
   public render(): VNode {
     return (
-      <div class="auth-container">
-        <div class="horizontal">
-          <div class="vertical">
-            <h4>Step 1 - Sign in</h4>
-            <div ref={this.textRef}>Loading</div>
-            <div ref={this.loginButtonRef} class="button" />
-            <div ref={this.navigationDataTextRef} />
-            <img ref={this.qrCodeRef} class="qr-code" />
-          </div>
-          <div class="vertical">
-            <h4>Step 2 - Select Database</h4>
-            <Dropdown ref={this.dropdownRef} />
-            <div ref={this.downloadButtonRef} class="button">
-              Download
+      <>
+        <div class="loading-container" hidden={this.interfaceInitialized}>
+          Waiting for navigation data interface to initialize... If building for the first time, this may take a few
+          minutes
+        </div>
+        <div class="auth-container" hidden={this.interfaceInitialized.map(SubscribableMapFunctions.not())}>
+          <div class="horizontal">
+            <div class="vertical">
+              <h4>Step 1 - Sign in</h4>
+              <div ref={this.textRef}>Loading</div>
+              <div ref={this.loginButtonRef} class="button" />
+              <div ref={this.navigationDataTextRef} />
+              <img ref={this.qrCodeRef} class="qr-code" />
+            </div>
+            <div class="vertical">
+              <h4>Step 2 - Select Database</h4>
+              <Dropdown ref={this.dropdownRef} />
+              <div ref={this.downloadButtonRef} class="button">
+                Download
+              </div>
+              {this.renderDatabaseStatus()}
             </div>
-            {this.renderDatabaseStatus()}
           </div>
-        </div>
 
-        <h4 style="text-align: center;">Step 3 - Query the database</h4>
-        <div class="horizontal">
-          <div class="vertical">
-            <Input ref={this.icaoInputRef} value="ESSA" class="text-field" />
-            <div ref={this.executeIcaoButtonRef} class="button">
-              Fetch Airport
-            </div>
-            <div style="height:30px;"></div>
-            <Input
-              ref={this.sqlInputRef}
-              textarea
-              value="SELECT airport_name FROM tbl_airports WHERE airport_identifier = 'ESSA'"
-              class="text-field"
-            />
-            <div ref={this.executeSqlButtonRef} class="button">
-              Execute SQL
+          <h4 style="text-align: center;">Step 3 - Query the database</h4>
+          <div class="horizontal">
+            <div class="vertical">
+              <Input ref={this.icaoInputRef} value="ESSA" class="text-field" />
+              <div ref={this.executeIcaoButtonRef} class="button">
+                Fetch Airport
+              </div>
+              <div style="height:30px;"></div>
+              <Input
+                ref={this.sqlInputRef}
+                textarea
+                value="SELECT airport_name FROM tbl_airports WHERE airport_identifier = 'ESSA'"
+                class="text-field"
+              />
+              <div ref={this.executeSqlButtonRef} class="button">
+                Execute SQL
+              </div>
             </div>
+            <pre ref={this.outputRef} id="output">
+              The output of the query will show up here
+            </pre>
           </div>
-          <pre ref={this.outputRef} id="output">
-            The output of the query will show up here
-          </pre>
         </div>
-      </div>
+      </>
     )
   }
 
@@ -152,16 +172,6 @@ export class InterfaceSample extends DisplayComponent<InterfaceSampleProps> {
     this.loginButtonRef.instance.addEventListener("click", () => this.handleClick())
     this.downloadButtonRef.instance.addEventListener("click", () => this.handleDownloadClick())
 
-    // Populate status when ready
-    this.navigationDataInterface.onReady(() => {
-      this.navigationDataInterface
-        .get_navigation_data_install_status()
-        .then(status => {
-          this.navigationDataStatus.set(status)
-        })
-        .catch(e => console.error(e))
-    })
-
     this.executeIcaoButtonRef.instance.addEventListener("click", () => {
       console.time("query")
       this.navigationDataInterface