Show busy indicator while waiting for query results - fixes #104

Change-Id: Ib818517199d8e8cb76215d7453849f6d813a61e3
diff --git a/Changes b/Changes
index aa1455f..e075546 100755
--- a/Changes
+++ b/Changes
@@ -1,4 +1,4 @@
-0.37 2019-12-17
+0.37 2020-01-07
         - Removed deprecated 'kalamar_test_port' helper.
         - Separated KalamarHelpers and KalamarPages.
         - Renamed 'doc_link_to' to 'embedded_link_to'
@@ -30,6 +30,8 @@
           statistics button (#107, hebasta)
         - Fixed links to Leibniz association (hebasta)
         - Make proxy timeouts configurable.
+        - Show busy indicator while waiting for query results
+          (#104).
 
 0.36 2019-09-19
         - Rename all cookies to be independent
diff --git a/Gruntfile.js b/Gruntfile.js
index 2547144..d64d307 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -143,6 +143,7 @@
 	      files: ['dev/scss/{util,base,fonts,kalamar,media,no-js}.scss',
 		            'dev/scss/base/flextable.scss',
 		            'dev/scss/base/fragment.scss',
+		            'dev/scss/base/load.scss',
 		            'dev/scss/footer/footer.scss',
 		            'dev/scss/sidebar/sidebar.scss',
 		            'dev/scss/header/{header,hint,menu,searchbar,vc,statistics,datepicker}.scss',
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 109fd48..478f87e 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -341,7 +341,7 @@
     if (form !== null) {
       form.addEventListener('submit', function (e) {
         var qf = d.getElementById('q-field');
-
+        
         // No query was defined
         if (qf.value === undefined || qf.value === '') {
           qf.focus();
@@ -349,7 +349,7 @@
           KorAP.log(700, "No query given");
           return;
         };
-
+        
         // Store session information
         KorAP.session.set("show", show);
 
@@ -362,6 +362,14 @@
           input.removeAttribute('value');
           input.removeAttribute('name');
         };
+
+        // This would preferably set the query to be "disabled",
+        // but in that case the query wouldn't be submitted
+        // at all.
+        // Setting the cursor to "progress" fails in current versions
+        // of webkit.
+        qf.classList.add("loading");
+        d.getElementById('qsubmit').classList.add("loading");
       });
     };
  
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index 1582513..f6dc152 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -2,6 +2,7 @@
 @import "util";
 @import "base/flextable";
 @import "base/fragment";
+@import "base/load";
 
 /**
  * Basic global CSS rules for Kalamar
diff --git a/dev/scss/base/load.scss b/dev/scss/base/load.scss
new file mode 100644
index 0000000..1917a54
--- /dev/null
+++ b/dev/scss/base/load.scss
@@ -0,0 +1,14 @@
+div.loading {
+  background-color: transparent !important;
+  height: 16px !important;
+  width: 16px !important;
+  margin: 0 auto !important;
+}
+
+.loading {
+  background: {
+    position: center;
+    repeat: no-repeat;
+    image: url('data:image/gif;base64,R0lGODlhEAAQAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48Hzh2UngyGvet6OpmKWmBb5TI+LlTOlAAACH5BAkEAAEALAAAAAAQABAAAAIohA+hu3gMnXyBqnkNw1XDnHThZ32bd6LUg0SOOIJsCaPmtOJvrctHAQAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48nxZKGLkxqGiungmyCXh9nRUleSZrO10AACH5BAkEAAEALAAAAAAQABAAAAIohA8RyKwN04pSWdumufp0niHghnkPyaWmqZLsKL3QWXUrJdpo66RKAQAh+QQJBAABACwAAAAAEAAQAAACJoQPEcisDdOKUlnbrp4IH989n1iBJUhK47itxkbGsEvRtXq/8B4UACH5BAkEAAEALAAAAAAQABAAAAIphA8RyKwN04pSWdvuNPto1HEX6G1YOYrain5im0pQ/GSnTIFr7eyhUQAAIfkECQQAAQAsAAAAABAAEAAAAiqMf6ALwWoelJFS5CbESTdeNUu3jWP4IWe2qS0TsmC8cuZFsrAkWrgtKQAAIfkECQQAAQAsAAAAABAAEAAAAiiMf6AL6LwMnDFQVG9SkrveWN6XjR82Mmi4cdMTvWsjnyIV4rIOgUwBACH5BAkEAAEALAAAAAAQABAAAAImjH+gC8HrXpNTxoeuzkltrkFg6BnMiJxpaYpWV76jDFKujV14LBUAIfkEAR4AAQAsAAAAABAAEAAAAiSEDxHIrA3TilJZ266eaN/8HJixdd4nailXgafrwSUVUqltQgUAOw==');
+  }
+}
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index ab86913..7e34b27 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -19,6 +19,11 @@
   &::-webkit-search-cancel-button {
     display: none;
   }
+
+  &.loading {
+    background-color: $light-orange;
+    background-image: none;
+  }
 }
 
 header input {
@@ -34,7 +39,7 @@
     position: absolute;
     padding: 0;
     right: $right-distance;
-    &::after {
+    &:not(.loading)::after {
       content: $fa-search;
     }
   }
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index c36126f..3039d03 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -284,14 +284,3 @@
 div.metatable > dl.cbm-disabled > div > dd {
   cursor: default !important;
 }
-
-div.loading {
-  background-color: transparent !important;
-  height: 16px !important;
-  width: 16px !important;
-  margin: 0 auto !important;
-  background-image: url('data:image/gif;base64,R0lGODlhEAAQAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48Hzh2UngyGvet6OpmKWmBb5TI+LlTOlAAACH5BAkEAAEALAAAAAAQABAAAAIohA+hu3gMnXyBqnkNw1XDnHThZ32bd6LUg0SOOIJsCaPmtOJvrctHAQAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48nxZKGLkxqGiungmyCXh9nRUleSZrO10AACH5BAkEAAEALAAAAAAQABAAAAIohA8RyKwN04pSWdumufp0niHghnkPyaWmqZLsKL3QWXUrJdpo66RKAQAh+QQJBAABACwAAAAAEAAQAAACJoQPEcisDdOKUlnbrp4IH989n1iBJUhK47itxkbGsEvRtXq/8B4UACH5BAkEAAEALAAAAAAQABAAAAIphA8RyKwN04pSWdvuNPto1HEX6G1YOYrain5im0pQ/GSnTIFr7eyhUQAAIfkECQQAAQAsAAAAABAAEAAAAiqMf6ALwWoelJFS5CbESTdeNUu3jWP4IWe2qS0TsmC8cuZFsrAkWrgtKQAAIfkECQQAAQAsAAAAABAAEAAAAiiMf6AL6LwMnDFQVG9SkrveWN6XjR82Mmi4cdMTvWsjnyIV4rIOgUwBACH5BAkEAAEALAAAAAAQABAAAAImjH+gC8HrXpNTxoeuzkltrkFg6BnMiJxpaYpWV76jDFKujV14LBUAIfkEAR4AAQAsAAAAABAAEAAAAiSEDxHIrA3TilJZ266eaN/8HJixdd4nailXgafrwSUVUqltQgUAOw==');
-
-}
-
-