From c8f07c85fa82da2649c5bae8fae6483019d3d836 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 2 Mar 2020 22:01:08 +0300
Subject: [PATCH] Add loading button

---
 src/store/modules/status.js  | 8 +++++++-
 src/views/statuses/index.vue | 5 ++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/store/modules/status.js b/src/store/modules/status.js
index c0cf5b0f..7e3663fe 100644
--- a/src/store/modules/status.js
+++ b/src/store/modules/status.js
@@ -9,7 +9,8 @@ const status = {
       showLocal: false,
       showPrivate: false,
       page: 1,
-      pageSize: 30
+      pageSize: 30,
+      buttonLoading: false
     }
   },
   mutations: {
@@ -31,6 +32,9 @@ const status = {
     PUSH_STATUSES: (state, statuses) => {
       state.fetchedStatuses = [...state.fetchedStatuses, ...statuses]
     },
+    SET_BUTTON_LOADING: (state, status) => {
+      state.statusesByInstance.buttonLoading = status
+    },
     SET_LOADING: (state, status) => {
       state.loading = status
     }
@@ -82,6 +86,7 @@ const status = {
       commit('SET_LOADING', false)
     },
     async FetchStatusesPageByInstance({ commit, getters, state }) {
+      commit('SET_BUTTON_LOADING', true)
       const statuses = await fetchStatusesByInstance(
         {
           instance: state.statusesByInstance.selectedInstance,
@@ -92,6 +97,7 @@ const status = {
         })
 
       commit('PUSH_STATUSES', statuses.data)
+      commit('SET_BUTTON_LOADING', false)
     },
     HandleGodmodeCheckboxChange({ commit, dispatch }, value) {
       commit('CHANGE_GODMODE_CHECKBOX_VALUE', value)
diff --git a/src/views/statuses/index.vue b/src/views/statuses/index.vue
index 1c17eaa5..29187df7 100644
--- a/src/views/statuses/index.vue
+++ b/src/views/statuses/index.vue
@@ -39,7 +39,7 @@
         @status-selection="handleStatusSelection" />
     </div>
     <div v-if="statuses.length > 0" class="statuses-pagination">
-      <el-button @click="handleLoadMore">{{ $t('statuses.loadMore') }}</el-button>
+      <el-button :loading="buttonLoading" @click="handleLoadMore">{{ $t('statuses.loadMore') }}</el-button>
     </div>
   </div>
 </template>
@@ -60,6 +60,9 @@ export default {
     }
   },
   computed: {
+    buttonLoading() {
+      return this.$store.state.status.statusesByInstance.buttonLoading
+    },
     currentInstance() {
       return this.selectedInstance === this.$store.state.user.authHost
     },