diff --git a/app/assets/javascripts/repo/components/repo_file.vue b/app/assets/javascripts/repo/components/repo_file.vue
index bd57c33af6ab2d50cc9b1146e4403770756c4f61..f604bc22a266f916fea34496fddabed843cc7771 100644
--- a/app/assets/javascripts/repo/components/repo_file.vue
+++ b/app/assets/javascripts/repo/components/repo_file.vue
@@ -29,6 +29,12 @@ const RepoFile = {
     },
   },
 
+  computed: {
+    canShowFile() {
+      return !this.loading.tree || this.hasFiles;
+    },
+  },
+
   methods: {
     linkClicked(file) {
       this.$emit('linkclicked', file);
@@ -40,7 +46,7 @@ export default RepoFile;
 </script>
 
 <template>
-<tr class="file" v-if="!loading.tree || hasFiles" :class="{'active': activeFile.url === file.url}">
+<tr class="file" v-if="canShowFile" :class="{'active': activeFile.url === file.url}">
   <td @click.prevent="linkClicked(file)">
     <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>