moved key into data structure

uses an array of classes to render skeleton loading cells

1 files changed, 8 insertions, 3 deletions

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>