From d79871ca09e68817b0daa383c136f8121e033659 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Wed, 4 Apr 2018 22:52:43 +0900
Subject: [PATCH] refs #183 Add loading when follow/unfollow

---
 .../TimelineSpace/Contents/SideBar/AccountProfile.vue  |  9 +++++++--
 .../TimelineSpace/Contents/SideBar/AccountProfile.js   | 10 +++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
index 37f02e32..5d93ba50 100644
--- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
@@ -1,5 +1,9 @@
 <template>
-<div id="account_profile">
+<div id="account_profile"
+     v-loading="loading"
+     element-loading-text="Loading..."
+     element-loading-spinner="el-icon-loading"
+     element-loading-background="rgba(0, 0, 0, 0.8)">
   <div class="header-background" v-bind:style="{ backgroundImage: 'url(' + account.header + ')' }">
     <div class="header">
       <div class="follow-follower" v-if="relationship !== null && relationship !== ''">
@@ -58,7 +62,8 @@ export default {
   computed: {
     ...mapState({
       account: state => state.TimelineSpace.Contents.SideBar.AccountProfile.account,
-      relationship: state => state.TimelineSpace.Contents.SideBar.AccountProfile.relationship
+      relationship: state => state.TimelineSpace.Contents.SideBar.AccountProfile.relationship,
+      loading: state => state.TimelineSpace.Contents.SideBar.AccountProfile.loading
     })
   },
   methods: {
diff --git a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.js b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.js
index 13aa8e95..ed0479dc 100644
--- a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.js
+++ b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.js
@@ -4,7 +4,8 @@ const AccountProfile = {
   namespaced: true,
   state: {
     account: null,
-    relationship: null
+    relationship: null,
+    loading: false
   },
   mutations: {
     changeAccount (state, account) {
@@ -12,6 +13,9 @@ const AccountProfile = {
     },
     changeRelationship (state, relationship) {
       state.relationship = relationship
+    },
+    changeLoading (state, value) {
+      state.loading = value
     }
   },
   actions: {
@@ -36,12 +40,14 @@ const AccountProfile = {
     },
     follow ({ state, commit, rootState }, account) {
       return new Promise((resolve, reject) => {
+        commit('changeLoading', true)
         const client = new Mastodon(
           {
             access_token: rootState.TimelineSpace.account.accessToken,
             api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
           })
         client.post(`/accounts/${account.id}/follow`, {}, (err, data, res) => {
+          commit('changeLoading', false)
           if (err) return reject(err)
           commit('changeRelationship', data)
           resolve(res)
@@ -50,12 +56,14 @@ const AccountProfile = {
     },
     unfollow ({ state, commit, rootState }, account) {
       return new Promise((resolve, reject) => {
+        commit('changeLoading', true)
         const client = new Mastodon(
           {
             access_token: rootState.TimelineSpace.account.accessToken,
             api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
           })
         client.post(`/accounts/${account.id}/unfollow`, {}, (err, data, res) => {
+          commit('changeLoading', false)
           if (err) return reject(err)
           commit('changeRelationship', data)
           resolve(res)