Merge branch '44294-skeleton-lines' into 'master'

Resolve "skeleton placeholder on diff has white background"

Closes #44294

See merge request gitlab-org/gitlab-ce!17792

app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue

@@ -9,7 +9,7 @@
       lines: {
         type: Number,
         required: false,
-        default: 6,
+        default: 3,
       },
     },
     computed: {

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,43 @@ 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;
-  }
-
-  div {
-    background: $white-light;
-    height: 6px;
-    left: 0;
-    position: absolute;
-    right: 0;
-  }
+    background-color: $theme-gray-100;
+    height: 10px;
+    overflow: hidden;
 
-  .skeleton-line-1 {
-    left: 0;
-    top: 8px;
+    &:not(:last-of-type) {
+      margin-bottom: 4px;
     }
 
-  .skeleton-line-2 {
-    left: 150px;
-    top: 0;
+    &::after {
+      content: ' ';
+      display: block;
+      animation: blockTextShine 1s linear infinite forwards;
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-image: linear-gradient(
+        to right,
+        $theme-gray-100 0%,
+        $theme-gray-50 20%,
+        $theme-gray-100 40%,
+        $theme-gray-100 100%
+      );
       height: 10px;
     }
-
-  .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-widths: (
+  156px,
+  235px,
+  200px,
+);
 
-  .skeleton-line-6 {
-    top: 14px;
-    left: 230px;
-    height: 10px;
+@for $count from 1 through length($skeleton-line-widths) {
+  .skeleton-line-#{$count} {
+    width: nth($skeleton-line-widths, $count);
   }
 }
 

app/assets/stylesheets/framework/variables.scss

@@ -713,20 +713,6 @@ $color-high-score: $green-400;
 $color-average-score: $orange-400;
 $color-low-score: $red-400;
 
-/*
-Repo editor
-*/
-$repo-editor-grey: #f6f7f9;
-$repo-editor-grey-darker: #e9ebee;
-$repo-editor-linear-gradient: linear-gradient(
-  to right,
-  $repo-editor-grey 0%,
-  $repo-editor-grey-darker,
-  20%,
-  $repo-editor-grey 40%,
-  $repo-editor-grey 100%
-);
-
 /*
 Performance Bar
 */

spec/javascripts/ide/components/repo_loading_file_spec.js

@@ -27,7 +27,7 @@ describe('RepoLoadingFile', () => {
       const lines = [...container.querySelectorAll(':scope > div')];
 
       expect(container).toBeTruthy();
-      expect(lines.length).toEqual(6);
+      expect(lines.length).toEqual(3);
       assertLines(lines);
     });
   }

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', () => {