feat(widget): better config loading UX

vuejs · Oct 29, 2018 · 6f5b0a8 · 6f5b0a8
1 parent 81ec5c0
commit 6f5b0a8
Showing 1 changed file with 11 additions and 1 deletion.
diff --git a/packages/@vue/cli-ui/src/components/dashboard/Widget.vue b/packages/@vue/cli-ui/src/components/dashboard/Widget.vue
@@ -141,7 +141,12 @@
         @close="showConfig = false"
       >
         <div class="default-body">
+          <VueLoadingIndicator
+            v-if="loadingConfig"
+            class="big accent"
+          />
           <PromptsList
+            v-else
             :prompts="visiblePrompts"
             @answer="answerPrompt"
           />
@@ -151,6 +156,7 @@
           <VueButton
             class="primary big"
             :label="$t('org.vue.components.widget.save')"
+            :disabled="loadingConfig"
             @click="saveConfig()"
           />
         </div>
@@ -259,6 +265,7 @@ export default {
   data () {
     return {
       showConfig: false,
+      loadingConfig: false,
       showDetails: false,
       injected: {
         // State
@@ -324,17 +331,20 @@ export default {
 
   methods: {
     async openConfig () {
+      this.loadingConfig = true
+      this.showConfig = true
       await this.$apollo.mutate({
         mutation: WIDGET_CONFIG_OPEN,
         variables: {
           id: this.widget.id
         }
       })
-      this.showConfig = true
+      this.loadingConfig = false
     },
 
     async saveConfig () {
       this.showConfig = false
+      this.loadingConfig = false
       await this.$apollo.mutate({
         mutation: WIDGET_CONFIG_SAVE,
         variables: {