Added spinner when filter is applied

SpeciesFileGroup · Sep 14, 2020 · b785887 · b785887
1 parent 78fbcbb
commit b785887
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 22 deletions.
diff --git a/app/javascript/vue/tasks/dwca_import/components/table.vue b/app/javascript/vue/tasks/dwca_import/components/table.vue
@@ -7,6 +7,7 @@
       ref="table"
       @update="getPages">
       <template slot-scope="{ items }">
+        <spinner-component v-if="isLoading"/>
         <table
           class="table">
           <thead>
@@ -56,6 +57,7 @@ import { GetterNames } from '../store/getters/getters'
 import { MutationNames } from '../store/mutations/mutations'
 import { ActionNames } from '../store/actions/actions'
 import VirtualScroller from './VirtualScroller.vue'
+import SpinnerComponent from 'components/spinner'
 
 import RowComponent from './row'
 import ColumnFilter from './ColumnFilter'
@@ -66,7 +68,8 @@ export default {
     VirtualScroller,
     RowComponent,
     ColumnFilter,
-    StatusFilter
+    StatusFilter,
+    SpinnerComponent
   },
   props: {
     disabled: {
@@ -96,14 +99,17 @@ export default {
   },
   data () {
     return {
-      isProcessing: false
+      isLoading: false
     }
   },
   watch: {
     params: {
       handler () {
         this.$refs.table.$el.scrollTop = 0
-        this.$store.dispatch(ActionNames.LoadDatasetRecords)
+        this.isLoading = true
+        this.$store.dispatch(ActionNames.LoadDatasetRecords).then(() => {
+          this.isLoading = false
+        })
       },
       deep: true
     }

diff --git a/app/javascript/vue/tasks/dwca_import/store/actions/loadDataSetRecords.js b/app/javascript/vue/tasks/dwca_import/store/actions/loadDataSetRecords.js
@@ -5,27 +5,31 @@ import Qs from 'qs'
 import GetPagination from 'helpers/getPagination'
 
 export default ({ state, commit }, page) => {
-  if (page !== undefined && state.datasetRecords[page] && (state.datasetRecords[page].downloaded || state.datasetRecords.rows)) return
-  state.isLoading = true
-  GetDatasetRecords(state.dataset.id, {
-    params: Object.assign({}, { page: page }, state.paramsFilter), paramsSerializer: (params) => Qs.stringify(params, { arrayFormat: 'brackets' })
-  }).then(response => {
-    commit(MutationNames.SetPagination, GetPagination(response))
+  return new Promise((resolve, reject) => {
+    if (page !== undefined && state.datasetRecords[page] && (state.datasetRecords[page].downloaded || state.datasetRecords.rows)) return resolve()
+    state.isLoading = true
+    GetDatasetRecords(state.dataset.id, {
+      params: Object.assign({}, { page: page }, state.paramsFilter), paramsSerializer: (params) => Qs.stringify(params, { arrayFormat: 'brackets' })
+    }).then(response => {
+      commit(MutationNames.SetPagination, GetPagination(response))
 
-    if (page === undefined) {
-      page = 1
-      commit(MutationNames.SetDatasetRecords, createEmptyPages(state.pagination))
-    }
-    commit(MutationNames.SetDatasetPage, {
-      pageNumber: page,
-      page: {
-        count: response.body.length,
-        downloaded: true,
-        rows: response.body
+      if (page === undefined) {
+        page = 1
+        commit(MutationNames.SetDatasetRecords, createEmptyPages(state.pagination))
       }
+      commit(MutationNames.SetDatasetPage, {
+        pageNumber: page,
+        page: {
+          count: response.body.length,
+          downloaded: true,
+          rows: response.body
+        }
+      })
+      state.isLoading = false
+      resolve(response)
+    }, (error) => {
+      state.isLoading = false
+      reject(error)
     })
-    state.isLoading = false
-  }, () => {
-    state.isLoading = false
   })
 }