1 files changed, 13 insertions, 0 deletions
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 269f300a04d..c30018e04b0 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -3,6 +3,7 @@ import { mapState, mapActions } from 'vuex';
 import projectTree from './ide_project_tree.vue';
 import icon from '../../vue_shared/components/icon.vue';
 import panelResizer from '../../vue_shared/components/panel_resizer.vue';
+import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
 
 export default {
   data() {
@@ -14,9 +15,11 @@ export default {
     projectTree,
     icon,
     panelResizer,
+    skeletonLoadingContainer,
   },
   computed: {
     ...mapState([
+      'loading',
       'projects',
       'leftPanelCollapsed',
     ]),
@@ -32,6 +35,9 @@ export default {
       }
       return {};
     },
+    showLoading() {
+      return this.loading;
+    },
   },
   methods: {
     ...mapActions([
@@ -63,6 +69,13 @@ export default {
       :style="panelStyle"
     >
     <div class="multi-file-commit-panel-inner">
+      <div
+        class="multi-file-loading-container"
+        v-if="showLoading"
+        v-for="n in 3"
+        :key="n">
+        <skeleton-loading-container/>
+      </div>
       <project-tree
         v-for="(project, index) in projects"
         :key="project.id"