feat(file-diff): less obnoxious loading UX

vuejs · Oct 29, 2018 · 5ff7198456fd43f5d9bdd5359c01cd6322a214b2 · 5ff7198
1 parent c8a53a4
commit 5ff7198456fd43f5d9bdd5359c01cd6322a214b2
Showing with 8 additions and 2 deletions.

+8 −2 packages/@vue/cli-ui/src/components/file-diff/FileDiffView.vue
diff --git a/packages/@vue/cli-ui/src/components/file-diff/FileDiffView.vue b/packages/@vue/cli-ui/src/components/file-diff/FileDiffView.vue
@@ -4,6 +4,12 @@
       <VueIcon icon="cached"/>
       <div class="title">{{ $t('org.vue.components.file-diff-view.files-changed') }}</div>
       <div class="file-count">{{ fileDiffs && fileDiffs.length }}</div>
+      <transition name="vue-ui-fade">
+        <VueLoadingIndicator
+          v-if="loading && fileDiffs.length"
+          class="small accent"
+        />
+      </transition>
       <div class="vue-ui-spacer"/>
       <VueInput
         v-model="search"
@@ -76,8 +82,8 @@
 
     <transition name="vue-ui-fade">
       <VueLoadingIndicator
-        v-if="loading"
-        class="overlay"
+        v-if="loading && !fileDiffs.length"
+        class="accent big overlay"
       />
     </transition>