feat(configuration details): better loading UX

vuejs · Aug 31, 2018 · 5efbd1b · 5efbd1b
1 parent f8ccef1
commit 5efbd1b
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/packages/@vue/cli-ui/src/views/ProjectConfigurationDetails.vue b/packages/@vue/cli-ui/src/views/ProjectConfigurationDetails.vue
@@ -28,6 +28,11 @@
       </div>
     </template>
 
+    <VueLoadingIndicator
+      v-else
+      class="loading"
+    />
+
     <div class="actions-bar">
       <VueButton
         v-if="configuration && configuration.link"
@@ -102,13 +107,15 @@ export default {
           id: this.id
         }
       },
+      manual: true,
       async result ({ data, loading }) {
         if (!this.$_init && !loading && data && data.configuration) {
           this.$_init = true
           this.tabsHaveChanges = data.configuration.tabs.reduce((obj, tab) => {
             obj[tab.id] = false
             return obj
           }, {})
+          this.configuration = data.configuration
           await this.$nextTick()
           this.currentTab = data.configuration.tabs[0].id
         }
@@ -136,6 +143,7 @@ export default {
   methods: {
     init (tab) {
       this.currentTab = '__default'
+      this.configuration = null
       this.$_init = false
     },
 
@@ -176,9 +184,12 @@ export default {
   align-items stretch
   height 100%
 
-  .content
+  .content,
+  .loading
     flex 100% 1 1
     height 0
+
+  .content
     overflow-x hidden
     overflow-y auto