Add a loading interstitial

demo/app.css

@@ -18,6 +18,23 @@
     "footer footer";
 }
 
+#main-loading {
+  grid-area: left-bar / span 2;
+  align-self: center;
+  justify-self: center;
+  min-width: 50%;
+
+  padding: 16px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  background: #e8e8e8;
+
+  h2 {
+    margin-top: 0;
+    margin-bottom: 8px;
+  }
+}
+
 md-icon.icon-button {
   --md-icon-size: 16px;
 }

demo/app.ts

@@ -597,6 +597,18 @@ export class TDAApp extends MobxLitElement {
     `;
   }
 
+  renderLoading() {
+    if (this.mainDataLoaderService.isLoading == null) return null;
+
+    // prettier-ignore
+    return html`
+      <div id='main-loading'>
+        <h2>Loading data</h2>
+        ${this.mainDataLoaderService.isLoading!}
+      </div>
+    `;
+  }
+
   override render() {
     const onExampleClick = (e: CustomEvent<ExampleClicked>) => {
       const id = e.detail.id;
@@ -615,20 +627,23 @@ export class TDAApp extends MobxLitElement {
           ${this.renderDataFilters()}
           ${this.renderTaskFilters()}
         </div>
-        <div id='left-bar'>
-          <tda-data-index .index=${this.filteredDataIndex}
-            selectedId=${this.selectedExId}
-            @example-clicked=${onExampleClick}>
-          </tda-data-index>
-        </div>
-        <div id="example-controls">
-          ${this.renderExampleControls()}
-        </div>
-        <div id="example">
-          <tda-example-view .example=${this.currentExample}
-           .sxsExample=${this.sxsEnabled ? this.sxsExample : undefined}>
-          </tda-example-view>
-        </div>
+        ${this.renderLoading() ??
+          html`
+          <div id='left-bar'>
+            <tda-data-index .index=${this.filteredDataIndex}
+              selectedId=${this.selectedExId}
+              @example-clicked=${onExampleClick}>
+            </tda-data-index>
+          </div>
+          <div id="example-controls">
+            ${this.renderExampleControls()}
+          </div>
+          <div id="example">
+            <tda-example-view .example=${this.currentExample}
+            .sxsExample=${this.sxsEnabled ? this.sxsExample : undefined}>
+            </tda-example-view>
+          </div>`
+        }
         <div id="footer">
           ${this.statusMessage}
         </div>

demo/data_loader.ts

@@ -66,6 +66,8 @@ export class DataLoaderService {
   @observable jsonlPath: string | null = null;
   @observable examples: TDAExample[] = [];
 
+  @observable isLoading: string | null = null;
+
   pathIsUploadedFile(path: string): boolean {
     return path.startsWith('uploaded:');
   }
@@ -81,6 +83,7 @@ export class DataLoaderService {
       return;
     }
 
+    this.isLoading = path;
     if (this.pathIsUploadedFile(path)) {
       this.examples = await uploadedFileManager.loadExamples(path);
     }
@@ -89,6 +92,7 @@ export class DataLoaderService {
     }
 
     this.jsonlPath = path;
+    this.isLoading = null;
     console.log(
       `DataLoaderService: parsed ${this.examples.length} examples from ${this.jsonlPath}`,
     );