refs #183 Add loading when search instances

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/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)
           })
       })