From 67e21f5d79167d2bbf685c638693753b07385803 Mon Sep 17 00:00:00 2001
From: Nick Satterly <nfsatterly@gmail.com>
Date: Thu, 16 Apr 2020 23:07:21 +0200
Subject: [PATCH] Show progress bar while loading if search query changes

---
 src/components/AlertList.vue      |  4 ++++
 src/store/modules/alerts.store.ts | 14 +++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/AlertList.vue b/src/components/AlertList.vue
index 0af3c46c..df26f005 100644
--- a/src/components/AlertList.vue
+++ b/src/components/AlertList.vue
@@ -9,6 +9,7 @@
       class="alert-table"
       :class="[ displayDensity ]"
       :search="search"
+      :loading="isSearching"
       must-sort
       :custom-sort="customSort"
       sort-icon="arrow_drop_down"
@@ -462,6 +463,9 @@ export default {
     isLoading() {
       return this.$store.state.alerts.isLoading
     },
+    isSearching() {
+      return this.$store.state.alerts.isSearching ? 'primary' : false
+    },
     rowsPerPage() {
       return this.$store.getters.getPreference('rowsPerPage')
     },
diff --git a/src/store/modules/alerts.store.ts b/src/store/modules/alerts.store.ts
index 7b691b7c..54377663 100644
--- a/src/store/modules/alerts.store.ts
+++ b/src/store/modules/alerts.store.ts
@@ -7,6 +7,7 @@ const namespaced = true
 
 const state = {
   isLoading: false,
+  isSearching: false,
 
   alerts: [],
   selected: [], // used by multi-select checkboxes
@@ -50,18 +51,21 @@ const state = {
 }
 
 const mutations = {
-  SET_LOADING(state) {
+  SET_LOADING(state): any {
     state.isLoading = true
   },
+  SET_SEARCH_QUERY(state, query): any {
+    state.isSearching = true
+    state.query = query
+  },
   SET_ALERTS(state, alerts): any {
     state.isLoading = false
+    state.isSearching = false
     state.alerts = alerts
   },
-  RESET_LOADING(state) {
+  RESET_LOADING(state): any {
     state.isLoading = false
-  },
-  SET_SEARCH_QUERY(state, query): any {
-    state.query = query
+    state.isSearching = false
   },
   SET_KIOSK(state, isKiosk): any {
     state.isKiosk = isKiosk