From 7df0021fbe67c438f618dd4a2ee5c7ed4f902eba Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 2 Mar 2019 23:52:35 +0100
Subject: [PATCH] add loading states to async table and async table filter

---
 src/Foundation.hs                      |  2 ++
 static/css/utils/asyncTable.scss       |  5 +++++
 static/css/utils/asyncTableFilter.scss |  5 +++++
 static/js/utils/asyncTable.js          |  5 +++++
 static/js/utils/asyncTableFilter.js    | 11 +++++++++--
 5 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 static/css/utils/asyncTable.scss
 create mode 100644 static/css/utils/asyncTableFilter.scss

diff --git a/src/Foundation.hs b/src/Foundation.hs
index d76f6328f..718c1c705 100644
--- a/src/Foundation.hs
+++ b/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
diff --git a/static/css/utils/asyncTable.scss b/static/css/utils/asyncTable.scss
new file mode 100644
index 000000000..332f634e3
--- /dev/null
+++ b/static/css/utils/asyncTable.scss
@@ -0,0 +1,5 @@
+.async-table--loading {
+  opacity: 0.1;
+  pointer-events: none;
+  transition: opacity 400ms ease-in-out;
+}
diff --git a/static/css/utils/asyncTableFilter.scss b/static/css/utils/asyncTableFilter.scss
new file mode 100644
index 000000000..31f50e5a5
--- /dev/null
+++ b/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;
+}
diff --git a/static/js/utils/asyncTable.js b/static/js/utils/asyncTable.js
index e9d4ca49d..27a0b48c3 100644
--- a/static/js/utils/asyncTable.js
+++ b/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);
       });
diff --git a/static/js/utils/asyncTableFilter.js b/static/js/utils/asyncTableFilter.js
index b9bdf4a88..6ed3ae8df 100644
--- a/static/js/utils/asyncTableFilter.js
+++ b/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);