Merge pull request #189 from h3poteto/iss-183

closes #183 Show loading when user actions

src/renderer/components/Login/LoginForm.vue

@@ -7,9 +7,22 @@
     <el-form-item class="hidden">
       <el-input></el-input>
     </el-form-item>
-    <el-button type="primary" @click="confirm" v-if="selectedInstance === null">Search</el-button>
+    <el-button
+      type="primary"
+      @click="confirm"
+      v-if="selectedInstance === null"
+      v-loading="searching"
+      element-loading-background="rgba(0, 0, 0, 0.8)">
+      Search
+    </el-button>
     <el-form-item class="submit">
-      <el-button type="primary" class="login" @click="login" v-if="selectedInstance !== null">Login</el-button>
+      <el-button
+        type="primary"
+        class="login"
+        @click="login"
+        v-if="selectedInstance !== null">
+        Login
+      </el-button>
     </el-form-item>
   </el-form>
 </template>
@@ -21,7 +34,8 @@ export default {
   name: 'login-form',
   computed: {
     ...mapState({
-      selectedInstance: state => state.Login.selectedInstance
+      selectedInstance: state => state.Login.selectedInstance,
+      searching: state => state.Login.searching
     }),
     domainName: {
       get () {

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: {

src/renderer/store/Login.js

@@ -7,7 +7,8 @@ const Login = {
     instances: [],
     domainName: '',
     selectedInstance: null,
-    page: 2
+    page: 2,
+    searching: false
   },
   mutations: {
     updateInstances (state, instances) {
@@ -22,6 +23,9 @@ const Login = {
     },
     updateDomainName (state, domain) {
       state.domainName = domain
+    },
+    changeSearching (state, value) {
+      state.searching = value
     }
   },
   actions: {
@@ -69,13 +73,16 @@ const Login = {
     },
     confirmInstance ({ commit }, domain) {
       return new Promise((resolve, reject) => {
+        commit('changeSearching', true)
         axios
           .get(`https://${domain}/api/v1/instance`)
           .then((res) => {
+            commit('changeSearching', false)
             commit('changeInstance', domain)
             resolve(res)
           })
           .catch((err) => {
+            commit('changeSearching', false)
             reject(err)
           })
       })

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)