Add computed property for ghost lines.

app/assets/javascripts/repo/components/repo_loading_file.vue

@@ -18,6 +18,12 @@ const RepoLoadingFile = {
     },
   },
 
+  computed: {
+    showGhostLines() {
+      return loading.tree && !hasFiles;
+    }
+  },
+
   methods: {
     lineOfCode(n) {
       return `line-of-code-${n}`;
@@ -29,23 +35,23 @@ export default RepoLoadingFile;
 </script>
 
 <template>
-<tr v-if="loading.tree && !hasFiles" class="loading-file">
-  <td>
-    <div class="animation-container animation-container-small">
-      <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div>
-    </div>
-  </td>
+  <tr v-if="showGhostLines" class="loading-file">
+    <td>
+      <div class="animation-container animation-container-small">
+        <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div>
+      </div>
+    </td>
 
-  <td v-if="!isMini" class="hidden-sm hidden-xs">
-    <div class="animation-container">
-      <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div>
-    </div>
-  </td>
+    <td v-if="!isMini" class="hidden-sm hidden-xs">
+      <div class="animation-container">
+        <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div>
+      </div>
+    </td>
 
-  <td v-if="!isMini" class="hidden-xs">
-    <div class="animation-container animation-container-small">
-      <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div>
-    </div>
-  </td>
-</tr>
+    <td v-if="!isMini" class="hidden-xs">
+      <div class="animation-container animation-container-small">
+        <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div>
+      </div>
+    </td>
+  </tr>
 </template>