From 676275cc6c366623eafc608f0323cf69a3e2a84b Mon Sep 17 00:00:00 2001
From: Ahmed Abdelmageed <111192682+ahmed-mgd@users.noreply.github.com>
Date: Wed, 27 Nov 2024 10:17:20 -0500
Subject: [PATCH] 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 | 15 ++++++++++++++-
 .../app/views/files/_files_table.html.erb         |  1 +
 apps/dashboard/app/views/files/_spinner.html.erb  |  5 +++++
 apps/dashboard/test/system/remote_files_test.rb   |  3 +++
 4 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 apps/dashboard/app/views/files/_spinner.html.erb

diff --git a/apps/dashboard/app/javascript/files/data_table.js b/apps/dashboard/app/javascript/files/data_table.js
index 209abd6261..7c4c841e2d 100644
--- a/apps/dashboard/app/javascript/files/data_table.js
+++ b/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();
     }
diff --git a/apps/dashboard/app/views/files/_files_table.html.erb b/apps/dashboard/app/views/files/_files_table.html.erb
index 80b8a56150..9e7e91010c 100755
--- a/apps/dashboard/app/views/files/_files_table.html.erb
+++ b/apps/dashboard/app/views/files/_files_table.html.erb
@@ -24,6 +24,7 @@
       <tbody>
       </tbody>
     </table>
+    <%= render partial: "spinner" %>
   </div>
 </div>
 
diff --git a/apps/dashboard/app/views/files/_spinner.html.erb b/apps/dashboard/app/views/files/_spinner.html.erb
new file mode 100644
index 0000000000..76a0a63519
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/apps/dashboard/test/system/remote_files_test.rb b/apps/dashboard/test/system/remote_files_test.rb
index b2bf617c5a..399021af79 100644
--- a/apps/dashboard/test/system/remote_files_test.rb
+++ b/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