moved key into data structure

uses an array of classes to render skeleton loading cells

4 files changed, 12 insertions, 5 deletions

diff --git a/app/assets/javascripts/repo/components/repo_file.vue b/app/assets/javascripts/repo/components/repo_file.vue
index e7a40e06da7..9f16e6bb2cc 100644
--- a/app/assets/javascripts/repo/components/repo_file.vue
+++ b/app/assets/javascripts/repo/components/repo_file.vue
@@ -39,7 +39,7 @@
         return this.file.id.substr(0, 8);
       },
       submoduleColSpan() {
-        return !this.isCollapsed && this.isSubmodule ? 3 : undefined;
+        return !this.isCollapsed && this.isSubmodule ? 3 : 1;
       },
     },
     methods: {
diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index 8efc1aaa06c..3f61d048288 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -80,7 +80,7 @@ export default {
       />
       <repo-file
         v-for="(file, index) in treeList"
-        :key="file.name + file.type"
+        :key="file.key"
         :file="file"
       />
     </tbody>
diff --git a/app/assets/javascripts/repo/stores/utils.js b/app/assets/javascripts/repo/stores/utils.js
index 57c0dd62c41..fae1f4439a9 100644
--- a/app/assets/javascripts/repo/stores/utils.js
+++ b/app/assets/javascripts/repo/stores/utils.js
@@ -1,5 +1,6 @@
 export const dataStructure = () => ({
   id: '',
+  key: '',
   type: '',
   name: '',
   url: '',
@@ -55,6 +56,7 @@ export const decorateData = (entity) => {
   return {
     ...dataStructure(),
     id,
+    key: `${name}-${type}-${id}`,
     type,
     name,
     url,
diff --git a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
index 4e759fb6c6c..7ab5e069003 100644
--- a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
+++ b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
@@ -12,6 +12,11 @@
         default: 6,
       },
     },
+    computed: {
+      lineClasses() {
+        return new Array(this.lines).fill().map((_, i) => `skeleton-line-${i}`);
+      },
+    },
   };
 </script>
 
@@ -23,9 +28,9 @@
     }"
   >
     <div
-      v-for="line in lines"
-      :key="line"
-      :class="'skeleton-line-' + line"
+      v-for="(css, index) in lineClasses"
+      :key="index"
+      :class="css"
     >
     </div>
   </div>