add loading scrim for slow query

Esri · Nov 16, 2024 · 601daaa · 601daaa
1 parent 4fa44ee
commit 601daaa
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 43 deletions.
diff --git a/src/components/crowdsource-manager/readme.md b/src/components/crowdsource-manager/readme.md
@@ -202,6 +202,7 @@ graph TD;
   calcite-flow-item --> calcite-panel
   create-feature --> calcite-notice
   create-feature --> calcite-loader
+  layer-table --> calcite-scrim
   layer-table --> calcite-shell
   layer-table --> calcite-panel
   layer-table --> calcite-input

diff --git a/src/components/layer-table/layer-table.tsx b/src/components/layer-table/layer-table.tsx
@@ -236,6 +236,11 @@ export class LayerTable {
    */
   @State() _size: number = 0;
 
+  /**
+   * boolean: When true a loading indicator will be shown in place of the layer table
+   */
+  @State() _queryingData = false;
+
   //--------------------------------------------------------------------------
   //
   //  Properties (protected)
@@ -825,53 +830,58 @@ export class LayerTable {
   render() {
     const tableNodeClass = this._fetchingData ? "display-none" : "";
     const loadingClass = this._fetchingData ? "" : "display-none";
+    const scrimClass = this._queryingData ? "" : "display-none";
     const total = this._size.toString();
     const selected = this.selectedIds.length.toString();
     const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
     const showSearch = this._canShowFullTextSearch();
     this._validateActiveActions();
+    console.log("real2")
     return (
       <Host>
-        <calcite-shell>
-          {this._getTableControlRow("header")}
-          <div class={`width-full ${tableHeightClass}`}>
-            <calcite-panel class="height-full width-full">
-              {showSearch &&
-                <div class={"search-container"}>
-                  <calcite-input
-                    class={"search"}
-                    clearable
-                    icon="search"
-                    onCalciteInputChange={(evt) => void this._searchTextChanged(evt)}
-                    placeholder={this._searchPlaceHolder}
-                    title={this._searchPlaceHolder}
-                    type="search" />
-                </div>}
-
-              <calcite-loader
-                class={loadingClass}
-                label={this._translations.fetchingData}
-                scale="l"
-              />
-              <div
-                class={tableNodeClass}
-                ref={this.onTableNodeCreate}
-              />
-            </calcite-panel>
-          </div>
-          {
-            !this.isMobile ? (
-              <div class="bottom-left text-color height-19">
-                {
-                  this._translations.recordsSelected
-                    .replace("{{total}}", total)
-                    .replace("{{selected}}", selected)
-                }
-              </div>
-            ) : undefined
-          }
-        </calcite-shell>
-        {this.createFilterModal && this._filterModal()}
+        <div>
+          <calcite-scrim class={scrimClass} loading={this._queryingData} />
+          <calcite-shell>
+            {this._getTableControlRow("header")}
+            <div class={`width-full ${tableHeightClass}`}>
+              <calcite-panel class="height-full width-full">
+                {showSearch &&
+                  <div class={"search-container"}>
+                    <calcite-input
+                      class={"search"}
+                      clearable
+                      icon="search"
+                      onCalciteInputChange={(evt) => void this._searchTextChanged(evt)}
+                      placeholder={this._searchPlaceHolder}
+                      title={this._searchPlaceHolder}
+                      type="search" />
+                  </div>}
+
+                <calcite-loader
+                  class={loadingClass}
+                  label={this._translations.fetchingData}
+                  scale="l"
+                />
+                <div
+                  class={tableNodeClass}
+                  ref={this.onTableNodeCreate}
+                />
+              </calcite-panel>
+            </div>
+            {
+              !this.isMobile ? (
+                <div class="bottom-left text-color height-19">
+                  {
+                    this._translations.recordsSelected
+                      .replace("{{total}}", total)
+                      .replace("{{selected}}", selected)
+                  }
+                </div>
+              ) : undefined
+            }
+          </calcite-shell>
+          {this.createFilterModal && this._filterModal()}
+        </div>
       </Host>
     );
   }
@@ -1668,7 +1678,7 @@ export class LayerTable {
   protected _showDelete(): void {
     this.showDelete.emit({
       ids: this._getIds()
-    })
+    });
   }
 
   /**
@@ -1922,7 +1932,17 @@ export class LayerTable {
             return prev;
           }, []);
 
+          // when dealing with a feature layer with many features shift-select can take a very long time.
+          // don't allow the user to make additional interactions with the table if it takes more than 500 miliseconds
+          let queryComplete = false;
+          setTimeout(() => {
+            if (!queryComplete) {
+              this._queryingData = true;
+            }
+          }, 500);
           const oids = await queryAllOidsWithQueryFeatures(0, this._layer, [], orderBy);
+          queryComplete = true;
+          this._queryingData = false;
 
           let isBetween = false;
           const _start = this._table.viewModel.getObjectIdIndex(this._previousCurrentId);
@@ -2017,7 +2037,6 @@ export class LayerTable {
     // When this issue occurs we will wait for 1 second and attempt to finish the loading process
     setTimeout(() => {
       if (!this._loaded) {
-        console.log(`table.state: ${this._table.state}`)
         void this.finishLoading();
       }
     }, 1000);

diff --git a/src/components/layer-table/readme.md b/src/components/layer-table/readme.md
@@ -99,6 +99,7 @@ Type: `Promise<void>`
 
 ### Depends on
 
+- calcite-scrim
 - calcite-shell
 - calcite-panel
 - calcite-input
@@ -118,6 +119,7 @@ Type: `Promise<void>`
 ### Graph
 ```mermaid
 graph TD;
+  layer-table --> calcite-scrim
   layer-table --> calcite-shell
   layer-table --> calcite-panel
   layer-table --> calcite-input
@@ -133,6 +135,7 @@ graph TD;
   layer-table --> calcite-tooltip
   layer-table --> calcite-modal
   layer-table --> instant-apps-filter-list
+  calcite-scrim --> calcite-loader
   calcite-panel --> calcite-action
   calcite-panel --> calcite-action-menu
   calcite-panel --> calcite-scrim
@@ -142,7 +145,6 @@ graph TD;
   calcite-action-menu --> calcite-popover
   calcite-popover --> calcite-action
   calcite-popover --> calcite-icon
-  calcite-scrim --> calcite-loader
   calcite-input --> calcite-progress
   calcite-input --> calcite-icon
   calcite-action-bar --> calcite-action-group