1 files changed, 17 insertions, 12 deletions
diff --git a/app/assets/javascripts/ide/components/ide_repo_tree.vue b/app/assets/javascripts/ide/components/ide_repo_tree.vue
index b6b089e6b25..bd89ebe47d9 100644
--- a/app/assets/javascripts/ide/components/ide_repo_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_repo_tree.vue
@@ -1,15 +1,15 @@
 <script>
 import { mapState } from 'vuex';
-import RepoPreviousDirectory from './repo_prev_directory.vue';
-import RepoFile from './repo_file.vue';
-import RepoLoadingFile from './repo_loading_file.vue';
+import repoPreviousDirectory from './repo_prev_directory.vue';
+import repoFile from './repo_file.vue';
+import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
 import { treeList } from '../stores/utils';
 
 export default {
   components: {
-    'repo-previous-directory': RepoPreviousDirectory,
-    'repo-file': RepoFile,
-    'repo-loading-file': RepoLoadingFile,
+    repoPreviousDirectory,
+    repoFile,
+    skeletonLoadingContainer,
   },
   props: {
     treeId: {
@@ -19,7 +19,7 @@ export default {
   },
   computed: {
     ...mapState([
-      'loading',
+      'trees',
       'isRoot',
     ]),
     ...mapState({
@@ -34,7 +34,10 @@ export default {
       return !this.isRoot && this.fetchedList.length;
     },
     showLoading() {
-      return this.loading;
+      if (this.trees[this.treeId]) {
+        return this.trees[this.treeId].loading;
+      }
+      return true;
     },
   },
 };
@@ -49,11 +52,13 @@ export default {
         <repo-previous-directory
           v-if="hasPreviousDirectory"
         />
-        <repo-loading-file
+        <div
+          class="multi-file-loading-container"
           v-if="showLoading"
-          v-for="n in 5"
-          :key="n"
-        />
+          v-for="n in 3"
+          :key="n">
+          <skeleton-loading-container/>
+        </div>
         <repo-file
           v-for="file in fetchedList"
           :key="file.key"