From f639bdf9e89abf1091a870c42796374a8d14f160 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Mon, 15 Feb 2021 14:39:34 +0900
Subject: [PATCH] Show progress circle on testing a config

---
 .../containers/settings/ConfigCreationForm.vue     | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/components/containers/settings/ConfigCreationForm.vue b/frontend/components/containers/settings/ConfigCreationForm.vue
index aad794a6..fe922138 100644
--- a/frontend/components/containers/settings/ConfigCreationForm.vue
+++ b/frontend/components/containers/settings/ConfigCreationForm.vue
@@ -26,6 +26,9 @@
     </v-stepper-header>
     
     <v-card>
+      <v-overlay :value="isLoading">
+        <v-progress-circular indeterminate size="64" />
+      </v-overlay>
       <v-card-text class="pa-0">
         <v-stepper-content step="1">
           <h4 class="text-h6">Select a config template</h4>
@@ -114,7 +117,7 @@
           </v-btn>
           <v-btn
             v-show="step.isLast() && !passTesting"
-            :disabled="sampleText === ''"
+            :disabled="sampleText === '' || isLoading"
             color="primary"
             class="text-capitalize"
             @click="testConfig"
@@ -152,6 +155,7 @@ export default Vue.extend({
 
   data() {
     return {
+      isLoading: false,
       passTesting: false,
       sampleText: '',
       step: new StepCounter(1, 3),
@@ -212,18 +216,26 @@ export default Vue.extend({
     testConfig() {
       const projectId = this.$route.params.id
       const item = this.createConfig()
+      this.isLoading = true
       this.configService.testConfig(projectId, item, this.sampleText)
         .then(value => {
           this.passTesting = value.valid
         })
+        .finally(() => {
+          this.isLoading = false
+        })
     },
     saveConfig() {
       const projectId = this.$route.params.id
       const item = this.createConfig()
+      this.isLoading = true
       this.configService.save(projectId, item)
         .then(item => {
           this.$emit('onCreate')
         })
+        .finally(() => {
+          this.isLoading = false
+        })
     }
   }
 })