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

Change-Id: Ib818517199d8e8cb76215d7453849f6d813a61e3
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==');
-
-}
-
-