add loading states to async table and async table filter

src/Foundation.hs

@@ -1033,6 +1033,8 @@ siteLayout' headingOverride widget = do
       addStylesheet $ StaticR css_utils_alerts_scss
       addStylesheet $ StaticR css_utils_asidenav_scss
       addStylesheet $ StaticR css_utils_asyncForm_scss
+      addStylesheet $ StaticR css_utils_asyncTable_scss
+      addStylesheet $ StaticR css_utils_asyncTableFilter_scss
       addStylesheet $ StaticR css_utils_form_scss
       addStylesheet $ StaticR css_utils_inputs_scss
       addStylesheet $ StaticR css_utils_modal_scss

static/css/utils/asyncTable.scss

@@ -0,0 +1,5 @@
+.async-table--loading {
+  opacity: 0.1;
+  pointer-events: none;
+  transition: opacity 400ms ease-in-out;
+}

static/css/utils/asyncTableFilter.scss

@@ -0,0 +1,5 @@
+.async-table-filter--loading {
+  opacity: 0.1;
+  pointer-events: none;
+  transition: opacity 400ms ease-in-out;
+}

static/js/utils/asyncTable.js

@@ -6,6 +6,7 @@
   var HEADER_HEIGHT = 80;
   var RESET_OPTIONS = [ 'scrollTo' ];
   var TABLE_FILTER_FORM_CLASS = 'table-filter-form';
+  var ASYNC_TABLE_LOADING_CLASS = 'async-table--loading';
   var JS_INITIALIZED_CLASS = 'js-async-table-initialized';
 
   window.utils.asyncTable = function(wrapper, options) {
@@ -140,6 +141,8 @@
         throw new Error('httpClient not found!');
       }
 
+      wrapper.classList.add(ASYNC_TABLE_LOADING_CLASS);
+
       tableOptions = tableOptions || {};
       var headers = {
         'Accept': 'text/html',
@@ -157,6 +160,8 @@
         if (callback && typeof callback === 'function') {
           callback(wrapper);
         }
+
+        wrapper.classList.remove(ASYNC_TABLE_LOADING_CLASS);
       }).catch(function(err) {
         console.error(err);
       });

static/js/utils/asyncTableFilter.js

@@ -3,7 +3,9 @@
 
   window.utils = window.utils || {};
 
+  var ASYNC_TABLE_FILTER_LOADING_CLASS = 'async-table-filter--loading';
   var JS_INITIALIZED_CLASS = 'js-async-table-filter-initialized';
+  var INPUT_DEBOUNCE = 600;
 
   // debounce function, taken from Underscore.js
   function debounce(func, wait, immediate) {
@@ -29,6 +31,8 @@
     if (formElement.matches('.' + JS_INITIALIZED_CLASS)) {
       return false;
     }
+    options = options || {};
+    var tableIdent = options.dbtIdent;
 
     var formId = formElement.querySelector('[name="_formid"]').value;
     var inputs = {
@@ -67,7 +71,7 @@
           if (input.value.length === 0 || input.value.length > 2) {
             updateTable();
           }
-        }, 400);
+        }, INPUT_DEBOUNCE);
         input.addEventListener('input', debouncedInput);
       });
 
@@ -76,7 +80,7 @@
           if (input.value.length === 0 || input.value.length > 2) {
             updateTable();
           }
-        }, 400);
+        }, INPUT_DEBOUNCE);
         input.addEventListener('input', debouncedInput);
       });
 
@@ -102,6 +106,8 @@
       var url = serializeFormToURL();
       var callback = null;
 
+      formElement.classList.add(ASYNC_TABLE_FILTER_LOADING_CLASS);
+
       var focusedSearch = inputs.search.reduce(function(acc, input) {
         return acc || (input.matches(':focus') && input);
       }, null);
@@ -123,6 +129,7 @@
       var url = new URL(options.currentUrl || window.location.href);
       url.searchParams.set('_formid', formId);
       url.searchParams.set('_hasdata', 'true');
+      url.searchParams.set(tableIdent + '-page', '0');
 
       inputs.search.forEach(function(input) {
         url.searchParams.set(input.name, input.value);