Files busy signal (#3973)

Add a spinner to the files app that spins while the request is being made.

apps/dashboard/app/javascript/files/data_table.js

@@ -10,6 +10,7 @@ const EVENTNAME = {
 };
 
 const CONTENTID = '#directory-contents';
+const SPINNERID = '#tloading_spinner';
 
 let table = null;
 
@@ -269,6 +270,8 @@ class DataTable {
     async reloadTable(url) {
         var request_url = url || history.state.currentDirectoryUrl;
 
+        this.toggleSpinner();
+
         try {
             const response = await fetch(request_url, { headers: { 'Accept': 'application/json' }, cache: 'no-store' });
             const data = await this.dataFromJsonResponse(response);
@@ -297,7 +300,10 @@ class DataTable {
                         table.getTable().row(this.closest('tr')).deselect();
                     }
                 }
-            })
+            });
+
+            this.toggleSpinner();
+
             return result;
         } catch (e) {
             const eventData = {
@@ -308,12 +314,19 @@ class DataTable {
             $(CONTENTID).trigger(SWAL_EVENTNAME.showError, eventData);
 
             $('#open-in-terminal-btn').addClass('disabled');
+
+            this.toggleSpinner()
 
             // Removed this as it was causing a JS Error and there is no reprocution from removing it.
             // return await Promise.reject(e);
         }
     }
 
+    toggleSpinner() {
+        document.querySelector(SPINNERID).classList.toggle('d-none');
+        document.querySelector(CONTENTID).classList.toggle('d-none');
+    }
+
     updateDotFileVisibility() {
         this.reloadTable();
     }

apps/dashboard/app/views/files/_files_table.html.erb

@@ -24,6 +24,7 @@
       <tbody>
       </tbody>
     </table>
+    <%= render partial: "spinner" %>
   </div>
 </div>
 

apps/dashboard/app/views/files/_spinner.html.erb

@@ -0,0 +1,5 @@
+<div class="text-center text-primary d-none p-5" id="tloading_spinner">
+  <div class="spinner-border">
+    <span class="sr-only">Loading...</span>
+  </div>
+</div>

apps/dashboard/test/system/remote_files_test.rb

@@ -279,6 +279,9 @@ def setup
         find('#delete-btn').click
         find('button.swal2-confirm').click
 
+        # Allow time for file to be removed
+        sleep 1
+
         # verify app dir deleted according to UI
         assert_no_selector 'tbody a', exact_text: 'app', wait: 10
         assert_no_selector 'tbody a', exact_text: 'foo.txt', wait: 10