1 files changed, 33 insertions, 54 deletions
diff --git a/app/assets/javascripts/repo/components/repo_loading_file.vue b/app/assets/javascripts/repo/components/repo_loading_file.vue
index bc8c64c8362..832b45b2b29 100644
--- a/app/assets/javascripts/repo/components/repo_loading_file.vue
+++ b/app/assets/javascripts/repo/components/repo_loading_file.vue
@@ -1,43 +1,23 @@
 <script>
-const RepoLoadingFile = {
-  props: {
-    loading: {
-      type: Object,
-      required: false,
-      default: {},
-    },
-    hasFiles: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isMini: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-
-  computed: {
-    showGhostLines() {
-      return this.loading.tree && !this.hasFiles;
-    },
-  },
+  import repoMixin from '../mixins/repo_mixin';
 
-  methods: {
-    lineOfCode(n) {
-      return `skeleton-line-${n}`;
+  export default {
+    mixins: [
+      repoMixin,
+    ],
+    methods: {
+      lineOfCode(n) {
+        return `skeleton-line-${n}`;
+      },
     },
-  },
-};
-
-export default RepoLoadingFile;
+  };
 </script>
 
 <template>
   <tr
-    v-if="showGhostLines"
-    class="loading-file">
+    class="loading-file"
+    aria-label="Loading files"
+  >
     <td>
       <div
         class="animation-container animation-container-small">
@@ -48,29 +28,28 @@ export default RepoLoadingFile;
         </div>
       </div>
     </td>
-
-    <td
-      v-if="!isMini"
-      class="hidden-sm hidden-xs">
-      <div class="animation-container">
-        <div
-          v-for="n in 6"
-          :key="n"
-          :class="lineOfCode(n)">
+    <template v-if="!isMini">
+      <td
+        class="hidden-sm hidden-xs">
+        <div class="animation-container">
+          <div
+            v-for="n in 6"
+            :key="n"
+            :class="lineOfCode(n)">
+          </div>
         </div>
-      </div>
-    </td>
+      </td>
 
-    <td
-      v-if="!isMini"
-      class="hidden-xs">
-      <div class="animation-container animation-container-small">
-        <div
-          v-for="n in 6"
-          :key="n"
-          :class="lineOfCode(n)">
+      <td
+        class="hidden-xs">
+        <div class="animation-container animation-container-small animation-container-right">
+          <div
+            v-for="n in 6"
+            :key="n"
+            :class="lineOfCode(n)">
+          </div>
         </div>
-      </div>
-    </td>
+      </td>
+    </template>
   </tr>
 </template>