diff --git a/app/assets/javascripts/repo/repo_file.vue b/app/assets/javascripts/repo/repo_file.vue
index 571f3cd5bdb..143d0281400 100644
--- a/app/assets/javascripts/repo/repo_file.vue
+++ b/app/assets/javascripts/repo/repo_file.vue
@@ -42,7 +42,7 @@ export default RepoFile;
 <template>
 <tr class="file" v-if="!loading.tree || hasFiles" :class="{'active': activeFile.url === file.url}">
   <td @click.prevent="linkClicked(file)">
-    <i class="fa" v-if="!file.loading" :class="file.icon" :style="{'margin-left': file.level * 10 + 'px'}"></i>
+    <i class="fa file-icon" v-if="!file.loading" :class="file.icon" :style="{'margin-left': file.level * 10 + 'px'}"></i>
     <i class="fa fa-spinner fa-spin" v-if="file.loading" :style="{'margin-left': file.level * 10 + 'px'}"></i>
     <a :href="file.url" class="repo-file-name" :title="file.url">{{file.name}}</a>
   </td>
diff --git a/spec/javascripts/repo/repo_file_options_spec.js b/spec/javascripts/repo/repo_file_options_spec.js
index a6ef09f6374..cb840851620 100644
--- a/spec/javascripts/repo/repo_file_options_spec.js
+++ b/spec/javascripts/repo/repo_file_options_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import repoFileOptions from '~/repo/repo_file_options.vue';
 
-fdescribe('RepoFileOptions', () => {
+describe('RepoFileOptions', () => {
   const projectName = 'projectName';
 
   function createComponent(propsData) {
diff --git a/spec/javascripts/repo/repo_file_spec.js b/spec/javascripts/repo/repo_file_spec.js
index dad13c3fe2d..cd055d43b7e 100644
--- a/spec/javascripts/repo/repo_file_spec.js
+++ b/spec/javascripts/repo/repo_file_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import repoFile from '~/repo/repo_file.vue';
 
-describe('RepoFile', () => {
+fdescribe('RepoFile', () => {
   const updated = 'updated';
   const file = {
     icon: 'icon',
@@ -33,6 +33,7 @@ describe('RepoFile', () => {
       activeFile,
     });
     const name = vm.$el.querySelector('.repo-file-name');
+    const fileIcon = vm.$el.querySelector('.file-icon');
 
     expect(vm.$el.classList.contains('active')).toBeTruthy();
     expect(vm.$el.querySelector(`.${file.icon}`).style.marginLeft).toEqual('100px');
@@ -41,6 +42,8 @@ describe('RepoFile', () => {
     expect(name.textContent).toEqual(file.name);
     expect(vm.$el.querySelector('.commit-message').textContent).toBe(file.lastCommitMessage);
     expect(vm.$el.querySelector('.commit-update').textContent).toBe(updated);
+    expect(fileIcon.classList.contains(file.icon)).toBeTruthy();
+    expect(fileIcon.style.marginLeft).toEqual(`${file.level * 10}px`);
   });
 
   it('does render if hasFiles is true and is loading tree', () => {
@@ -54,6 +57,22 @@ describe('RepoFile', () => {
     });
 
     expect(vm.$el.innerHTML).toBeTruthy();
+    expect(vm.$el.querySelector('.fa-spin.fa-spinner')).toBeFalsy();
+  });
+
+  it('renders a spinner if the file is loading', () => {
+    file.loading = true;
+    const vm = createComponent({
+      file,
+      activeFile,
+      loading: {
+        tree: true,
+      },
+      hasFiles: true,
+    });
+
+    expect(vm.$el.innerHTML).toBeTruthy();
+    expect(vm.$el.querySelector('.fa-spin.fa-spinner').style.marginLeft).toEqual(`${file.level * 10}px`);
   });
 
   it('does not render if loading tree', () => {