Merge pull request #314 from alerta/searching-progress-bar

Show progress bar while loading if search query changes
alerta · Apr 16, 2020 · 71ba7c4 · 71ba7c4
2 parents d51baa0 + 67e21f5
commit 71ba7c4
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git 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
@@ -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