Removed Loading Icon Jumping

3 files changed, 20 insertions, 8 deletions

diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index f7f4db89bdf..1ea1cc816d7 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -35,9 +35,11 @@
         return this.file.type === 'tree';
       },
       levelIndentation() {
-        return {
-          marginLeft: `${this.file.level * 16}px`,
-        };
+        if (this.file.level > 0) {
+          return {
+            marginLeft: `${this.file.level * 16}px`,
+          };
+        }
       },
       shortId() {
         return this.file.id.substr(0, 8);
@@ -111,7 +113,7 @@
       />
       <i
         class="fa"
-        v-if="changedClass"
+        v-if="file.changed || file.tempFile"
         :class="changedClass"
         aria-hidden="true"
       >
diff --git a/app/assets/javascripts/vue_shared/components/loading_icon.vue b/app/assets/javascripts/vue_shared/components/loading_icon.vue
index 1eba117b18f..12a75e016d7 100644
--- a/app/assets/javascripts/vue_shared/components/loading_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_icon.vue
@@ -33,7 +33,7 @@
 <template>
   <component
     :is="rootElementType"
-    class="text-center">
+    class="loading-container text-center">
     <i
       class="fa fa-spin fa-spinner"
       :class="cssClass"
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 9ed04b199d6..bb23e7215d7 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -107,6 +107,11 @@ table.table tr td.multi-file-table-name {
     vertical-align: middle;
     margin-right: 2px;
   }
+
+  span.loading-container {
+    margin-right: 4px;
+    display: inline-block;
+  }
 }
 
 .multi-file-table-col-commit-message {
@@ -247,7 +252,6 @@ table.table tr td.multi-file-table-name {
   display: flex;
   position: relative;
   flex-direction: column;
-  height: 100%;
   width: 290px;
   padding: 0;
   background-color: $gray-light;
@@ -510,6 +514,10 @@ table.table tr td.multi-file-table-name {
   .content {
     margin-top: $header-height;
   }
+
+  .multi-file-commit-panel-inner {
+    height: calc(100vh - #{$header-height + $performance-bar-height});
+  }
 }
 
 .with-performance-bar .ide.nav-only {
@@ -521,7 +529,8 @@ table.table tr td.multi-file-table-name {
     margin-top: #{$header-height + $performance-bar-height};
   }
 
-  .ide-view {
+  .ide-view,
+  .multi-file-commit-panel-inner {
     height: calc(100vh - #{$header-height + $performance-bar-height});
   }
 
@@ -530,7 +539,8 @@ table.table tr td.multi-file-table-name {
       margin-top: 0;
     }
 
-    .ide-view {
+    .ide-view,
+    .multi-file-commit-panel-inner {
       height: calc(100vh - #{$header-height + $performance-bar-height + 52});
     }
   }