remvoe background color from skeleton text lines44294-skeleton-lines

3 files changed, 28 insertions, 49 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 b06493e6c66..16304e4815d 100644
--- a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
+++ b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
@@ -9,7 +9,7 @@
       lines: {
         type: Number,
         required: false,
-        default: 6,
+        default: 3,
       },
     },
     computed: {
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 728f9a27aca..5ea3866a1b9 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -187,12 +187,9 @@ a {
   animation: fadeInFull $fade-in-duration 1;
 }
 
-
 .animation-container {
-  background: $repo-editor-grey;
   height: 40px;
   overflow: hidden;
-  position: relative;
 
   &.animation-container-small {
     height: 12px;
@@ -205,60 +202,42 @@ a {
     }
   }
 
-  &::before {
-    animation-duration: 1s;
-    animation-fill-mode: forwards;
-    animation-iteration-count: infinite;
-    animation-name: blockTextShine;
-    animation-timing-function: linear;
-    background-image: $repo-editor-linear-gradient;
-    background-repeat: no-repeat;
-    background-size: 800px 45px;
-    content: ' ';
-    display: block;
-    height: 100%;
+  [class^="skeleton-line-"] {
     position: relative;
-  }
+    background-color: rgba(0, 0, 0, 0.06);
+    height: 10px;
+    overflow: hidden;
+
+    &:not(:last-of-type) {
+      margin-bottom: 4px;
+    }
 
-  div {
-    background: $white-light;
-    height: 6px;
-    left: 0;
-    position: absolute;
-    right: 0;
+    &:after {
+      content: ' ';
+      display: block;
+      animation-duration: 1s;
+      animation-fill-mode: forwards;
+      animation-iteration-count: infinite;
+      animation-name: blockTextShine;
+      animation-timing-function: linear;
+      background-repeat: no-repeat;
+      background-size: 800px 45px;
+      background-image: $repo-editor-linear-gradient;
+      height: 12px;
+      width: 100%;
+    }
   }
 
   .skeleton-line-1 {
-    left: 0;
-    top: 8px;
+    width: 156px;
   }
 
   .skeleton-line-2 {
-    left: 150px;
-    top: 0;
-    height: 10px;
+    width: 235px;
   }
 
   .skeleton-line-3 {
-    left: 0;
-    top: 23px;
-  }
-
-  .skeleton-line-4 {
-    left: 0;
-    top: 38px;
-  }
-
-  .skeleton-line-5 {
-    left: 200px;
-    top: 28px;
-    height: 10px;
-  }
-
-  .skeleton-line-6 {
-    top: 14px;
-    left: 230px;
-    height: 10px;
+    width: 200px;
   }
 }
 
diff --git a/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js b/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js
index bbd50863069..34487885cf0 100644
--- a/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js
+++ b/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js
@@ -14,8 +14,8 @@ describe('Skeleton loading container', () => {
     vm.$destroy();
   });
 
-  it('renders 6 skeleton lines by default', () => {
-    expect(vm.$el.querySelector('.skeleton-line-6')).not.toBeNull();
+  it('renders 3 skeleton lines by default', () => {
+    expect(vm.$el.querySelector('.skeleton-line-3')).not.toBeNull();
   });
 
   it('renders in full mode by default', () => {