From b3c22f8429c999526db7ab177b9ffd91ca5483d2 Mon Sep 17 00:00:00 2001
From: Simone Gotti <simone.gotti@gmail.com>
Date: Mon, 13 May 2019 23:48:44 +0200
Subject: [PATCH] createproject: add loading indicator and enabled to button

---
 src/components/createproject.vue | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/createproject.vue b/src/components/createproject.vue
index 156b386..c86562b 100644
--- a/src/components/createproject.vue
+++ b/src/components/createproject.vue
@@ -17,7 +17,12 @@
     </div>
     <div class="field is-grouped">
       <div class="control">
-        <button class="button is-primary" @click="createProject()">Create Project</button>
+        <button
+          class="button is-primary"
+          v-bind:class="{ 'is-loading': createProjectLoading }"
+          :disabled="!createProjectButtonEnabled"
+          @click="createProject()"
+        >Create Project</button>
       </div>
     </div>
     <div v-if="createProjectError" class="message is-danger">
@@ -48,18 +53,34 @@ export default {
   data() {
     return {
       createProjectError: null,
+      createProjectLoading: false,
+      createProjectLoadingTimeout: null,
       user: null,
       remoteSources: null,
       remoteRepos: [],
-      projectName: null,
+      projectName: "",
       remoteRepoPath: null,
       selectedRemoteSource: null
     };
   },
+  computed: {
+    createProjectButtonEnabled: function() {
+      return this.projectName.length && this.selectedRemoteSource;
+    }
+  },
   methods: {
     resetErrors() {
       this.createProjectError = null;
     },
+    startProjectLoading() {
+      this.createProjectLoadingTimeout = setTimeout(() => {
+        this.createProjectLoading = true;
+      }, 300);
+    },
+    stopProjectLoading() {
+      clearTimeout(this.createProjectLoadingTimeout);
+      this.createProjectLoading = false;
+    },
     repoSelected(remoteSource, repoPath) {
       this.selectedRemoteSource = remoteSource;
       this.remoteRepoPath = repoPath;
@@ -73,12 +94,14 @@ export default {
       }
       let parentref = refArray.join("/");
 
+      this.startProjectLoading();
       let { error } = await createProject(
         parentref,
         this.projectName,
         this.selectedRemoteSource.name,
         this.remoteRepoPath
       );
+      this.stopProjectLoading();
       if (error) {
         this.createProjectError = error;
         return;