From ab11309cd6e43e17555b76a17177ffe5689dc6d5 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 12 Jun 2018 10:15:43 -0700
Subject: [PATCH] Add loading spinner to filter bar

---
 ui/src/logs/components/QueryResults.tsx |  8 +++++-
 ui/src/style/pages/logs-viewer.scss     | 34 ++++++++++++++++++++++---
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/ui/src/logs/components/QueryResults.tsx b/ui/src/logs/components/QueryResults.tsx
index 6cb775e532..83ca69328e 100644
--- a/ui/src/logs/components/QueryResults.tsx
+++ b/ui/src/logs/components/QueryResults.tsx
@@ -8,8 +8,14 @@ interface Props {
 class QueryResults extends PureComponent<Props> {
   public render() {
     const {count} = this.props
+
     if (this.isPending) {
-      return <label className="logs-viewer--results-text">Querying ...</label>
+      return (
+        <>
+          <div className="logs-viewer--results-spinner" />
+          <label className="logs-viewer--results-text">Querying...</label>
+        </>
+      )
     }
 
     return (
diff --git a/ui/src/style/pages/logs-viewer.scss b/ui/src/style/pages/logs-viewer.scss
index 4790be2453..811007126a 100644
--- a/ui/src/style/pages/logs-viewer.scss
+++ b/ui/src/style/pages/logs-viewer.scss
@@ -6,6 +6,7 @@
 $logs-viewer-graph-height: 180px;
 $logs-viewer-search-height: 46px; 
 $logs-viewer-filter-height: 42px;
+$logs-viewer-results-text-indent: 33px;
 $logs-viewer-gutter: 60px;
 
 .logs-viewer {
@@ -77,19 +78,46 @@ $logs-viewer-gutter: 60px;
   padding: 0 $logs-viewer-gutter;
   height: $logs-viewer-filter-height;
   background-color: $g3-castle;
+  position: relative;
 }
 
 .logs-viewer--results-text {
-  margin: 0 12px 0 33px;
+  margin: 0 12px 0 $logs-viewer-results-text-indent;
   padding: 0;
   font-size: 13px;
   line-height: 13px;
-  font-weight: 500;
+  font-weight: 600;
   color: $g9-mountain;
+  transition: color 0.25s ease;
 
   strong {
     color: $g15-platinum;
-    font-weight: 700;
+    font-weight: 900;
+  }
+}
+
+@keyframes resultsSpinner {
+  0% {
+    transform: translateY(-50%) rotate(0deg);
+  }
+  100% {
+    transform: translateY(-50%) rotate(360deg);
+  }
+}
+
+.logs-viewer--results-spinner {
+  position: absolute;
+  top: 50%;
+  left: $logs-viewer-gutter + 8px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid $c-pool;
+  border-bottom-color: transparent;
+  animation: resultsSpinner 0.75s linear infinite;
+
+  & + .logs-viewer--results-text {
+    color: $c-pool;
   }
 }