Temporary fix to #716 and #717 by adding and removing "is-loading" cl…

…ass to search buttons
IGS · Jul 4, 2024 · f9e198a · f9e198a
1 parent 32220aa
commit f9e198a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/www/js/expression.js b/www/js/expression.js
@@ -66,10 +66,13 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // add event listener for when the submit-expression-search button is clicked
     document.getElementById('submit-expression-search').addEventListener('click', async (event) => {
+        const currentTarget = event.currentTarget;
+        currentTarget.classList.add('is-loading');
         const status = validateExpressionSearchForm();
 
         if (! status) {
             console.info("Aborting search");
+            event.currentTarget.classList.remove('is-loading');
             return;
         }
 
@@ -108,6 +111,8 @@ document.addEventListener('DOMContentLoaded', () => {
         } catch (error) {
             logErrorInConsole(error);
             return;
+        } finally {
+            currentTarget.classList.remove('is-loading');
         }
 
         const url = buildStateURL();
@@ -310,6 +315,7 @@ const handlePageSpecificLoginUIUpdates = async (event) => {
     layoutShareId = getUrlParameter('layout_id');
 
     // Wait until all pending API calls have completed before checking if we need to search
+    document.getElementById("submit-expression-search").classList.add("is-loading");
     try {
         // SAdkins note - Promise.all fails fast,
         // but Promise.allSettled waits until all resolve/reject and lets you know which ones failed
@@ -320,6 +326,8 @@ const handlePageSpecificLoginUIUpdates = async (event) => {
         ]);
     } catch (error) {
         logErrorInConsole(error);
+    } finally {
+        document.getElementById("submit-expression-search").classList.remove("is-loading");
     }
 
     // Trigger the default dataset collection to be selected in the

diff --git a/www/js/index.js b/www/js/index.js
@@ -159,10 +159,12 @@ const handlePageSpecificLoginUIUpdates = async (event) => {
         populateUserHistoryTable();
     }
 
+    document.getElementById("submit-expression-search").classList.add("is-loading");
     await Promise.all([
         fetchGeneCartData(),
         fetchDatasetCollections()
     ]);
+    document.getElementById("submit-expression-search").classList.remove("is-loading");
 
     // Trigger the default dataset collection to be selected in the
     if (CURRENT_USER.default_profile_share_id) {

diff --git a/www/js/projection.js b/www/js/projection.js
@@ -70,10 +70,14 @@ const handlePageSpecificLoginUIUpdates = async (event) => {
     // add event listener for when the submit-projection-search button is clicked
     document.querySelector('#submit-projection-search').addEventListener('click', async (event) => {
 
+        const currentTarget = event.currentTarget;
+        currentTarget.classList.add("is-loading");
+
         const status = validateProjectionSearchForm();
 
         if (! status) {
             console.info("Aborting search");
+            event.currentTarget.classList.remove("is-loading");
             return;
         }
 
@@ -104,12 +108,13 @@ const handlePageSpecificLoginUIUpdates = async (event) => {
         } catch (error) {
             logErrorInConsole(error);
             return;
+        } finally {
+            currentTarget.classList.remove("is-loading");
         }
 
         const url = buildStateUrl();
         // add to state history
         history.pushState(null, '', url);
-
     });
 
     // Change the svg scoring method when select element is changed
@@ -128,6 +133,7 @@ const handlePageSpecificLoginUIUpdates = async (event) => {
     });
 
     // Wait until all pending API calls have completed before checking if we need to search
+    document.getElementById("submit-projection-search").classList.add("is-loading");
     try {
         // SAdkins note - Promise.all fails fast,
         // but Promise.allSettled waits until all resolve/reject and lets you know which ones failed
@@ -141,6 +147,8 @@ const handlePageSpecificLoginUIUpdates = async (event) => {
 
     } catch (error) {
         logErrorInConsole(error);
+    } finally {
+        document.getElementById("submit-projection-search").classList.remove("is-loading");
     }
 
     // Trigger the default dataset collection to be selected in the