1 files changed, 23 insertions, 3 deletions
diff --git a/app/assets/javascripts/repo/components/repo_file.vue b/app/assets/javascripts/repo/components/repo_file.vue
index 7a23154b340..9f16e6bb2cc 100644
--- a/app/assets/javascripts/repo/components/repo_file.vue
+++ b/app/assets/javascripts/repo/components/repo_file.vue
@@ -1,11 +1,15 @@
 <script>
   import { mapActions, mapGetters } from 'vuex';
   import timeAgoMixin from '../../vue_shared/mixins/timeago';
+  import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
 
   export default {
     mixins: [
       timeAgoMixin,
     ],
+    components: {
+      skeletonLoadingContainer,
+    },
     props: {
       file: {
         type: Object,
@@ -16,6 +20,9 @@
       ...mapGetters([
         'isCollapsed',
       ]),
+      isSubmodule() {
+        return this.file.type === 'submodule';
+      },
       fileIcon() {
         return {
           'fa-spinner fa-spin': this.file.loading,
@@ -31,6 +38,9 @@
       shortId() {
         return this.file.id.substr(0, 8);
       },
+      submoduleColSpan() {
+        return !this.isCollapsed && this.isSubmodule ? 3 : 1;
+      },
     },
     methods: {
       ...mapActions([
@@ -44,7 +54,7 @@
   <tr
     class="file"
     @click.prevent="clickedTreeRow(file)">
-    <td>
+    <td :colspan="submoduleColSpan">
       <i
         class="fa fa-fw file-icon"
         :class="fileIcon"
@@ -58,7 +68,7 @@
       >
         {{ file.name }}
       </a>
-      <template v-if="file.type === 'submodule' && file.id">
+      <template v-if="isSubmodule && file.id">
         @
         <span class="commit-sha">
           <a
@@ -71,15 +81,20 @@
       </template>
     </td>
 
-    <template v-if="!isCollapsed">
+    <template v-if="!isCollapsed && !isSubmodule">
       <td class="hidden-sm hidden-xs">
         <a
+          v-if="file.lastCommit.message"
           @click.stop
           :href="file.lastCommit.url"
           class="commit-message"
         >
           {{ file.lastCommit.message }}
         </a>
+        <skeleton-loading-container
+          v-else
+          :small="true"
+        />
       </td>
 
       <td class="commit-update hidden-xs text-right">
@@ -89,6 +104,11 @@
         >
           {{ timeFormated(file.lastCommit.updatedAt) }}
         </span>
+        <skeleton-loading-container
+          v-else
+          class="animation-container-right"
+          :small="true"
+        />
       </td>
     </template>
   </tr>