Adds loading icon to path selector UI on table refresh (#3144)

* Adds loading icon to path selector UI on table refresh * Removes lastVisted reset, which was a development tool * Hides table on table refresh; uses bootstrap spinner instead of fa * Ensure table is still navigatable if there's an error on refresh * Removes development cruft * Removes #loading-icon css specification, adds classes to center loading spinner * Adds style to increase size of loading spinner on table refresh Recommended course of action to change size by bootstrap :/ * Removes spinner-grow class & adds .5-rem class * Fixes css selector class
OSC · Oct 31, 2023 · f3fe839 · f3fe839
1 parent e583601
commit f3fe839
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 15 deletions.
diff --git a/apps/dashboard/app/assets/stylesheets/common.scss b/apps/dashboard/app/assets/stylesheets/common.scss
@@ -1,4 +1,3 @@
-
 .clickable {
   cursor: pointer;
 }
@@ -21,3 +20,8 @@
   z-index: 1100;
   background-color: inherit;
 }
+
+.rem-5 {
+  width: 5rem;
+  height: 5rem;
+}
diff --git a/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js b/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js
@@ -83,14 +83,20 @@ export class PathSelectorTable {
 
   async reloadTable(url) {
     try {
+      $(`#${this.tableId}_wrapper`).hide();
+      $('#loading-icon').show();
       const response = await fetch(url, { headers: { 'Accept': 'application/json' }, cache: 'no-store' });
       const data = await this.dataFromJsonResponse(response);
       $(`#${this.breadcrumbId}`).html(data.path_selector_breadcrumbs_html);
       this._table.clear();
       this._table.rows.add(data.files);
-      this._table.draw();
       this.setLastVisited(data.path);
+      this._table.draw();
+      $('#loading-icon').hide();
+      $(`#${this.tableId}_wrapper`).show();
     } catch (err) {
+      $('#loading-icon').hide();
+      $(`#${this.tableId}_wrapper`).show();
       console.log(err);
     }
   }

diff --git a/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb b/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
@@ -39,20 +39,25 @@
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <div class="modal-body">        
+      <div class="modal-body">       
         <div>
-            <ol id="<%= breadcrumb_id %>" class="breadcrumb breadcrumb-no-delimiter">
-            </ol>
-            <table class="table table-hover table-condensed d-table w-100" id="<%= table_id %>">
-                <thead>
-                  <tr>
-                      <th>Type</th>
-                      <th>Name</th>
-                  </tr>
-                </thead>
-                <tbody>
-                </tbody>
-            </table>
+          <ol id="<%= breadcrumb_id %>" class="breadcrumb breadcrumb-no-delimiter">
+          </ol>
+          <div class="d-flex justify-content-center">
+            <div id="loading-icon" class="spinner-border rem-5" role="status">
+              <span class="sr-only">Loading...</span> 
+            </div>
+          </div>
+          <table class="table table-hover table-condensed d-table w-100" id="<%= table_id %>">
+            <thead>
+              <tr>
+                <th>Type</th>
+                <th>Name</th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
         </div>
       </div>
       <div class="modal-footer sticky-footer">