Add loading button

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)

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
     },