Resolve "Pipeline job log page uses too much CPU for loading animation"

app/assets/javascripts/ide/components/jobs/detail.vue

@@ -131,6 +131,9 @@ export default {
         v-show="detailJob.isLoading"
         class="build-loader-animation"
       >
+        <div class="dot"></div>
+        <div class="dot"></div>
+        <div class="dot"></div>
       </div>
     </pre>
   </div>

app/assets/stylesheets/framework/mixins.scss

@@ -22,7 +22,7 @@
   border: 0;
   border-color: $md-area-border;
 
-  @supports(width: fit-content) {
+  @supports (width: fit-content) {
     display: block;
     width: fit-content;
   }
@@ -116,7 +116,7 @@
 
 /* http://phrappe.com/css/conditional-css-for-webkit-based-browsers/ */
 @mixin on-webkit-only {
-  @media screen and (-webkit-min-device-pixel-ratio:0) {
+  @media screen and (-webkit-min-device-pixel-ratio: 0) {
     @content;
   }
 }
@@ -164,14 +164,18 @@
   bottom: 12px;
   width: 43px;
   height: 30px;
-  transition-duration: .3s;
+  transition-duration: 0.3s;
   -webkit-transform: translateZ(0);
-  background: linear-gradient(to $gradient-direction, $gradient-color 45%, rgba($gradient-color, 0.4));
+  background: linear-gradient(
+    to $gradient-direction,
+    $gradient-color 45%,
+    rgba($gradient-color, 0.4)
+  );
 
   &.scrolling {
     visibility: visible;
     opacity: 1;
-    transition-duration: .3s;
+    transition-duration: 0.3s;
   }
 
   .fa {
@@ -233,6 +237,29 @@
   max-width: 100%;
 }
 
+@mixin build-loader-animation {
+  position: relative;
+  white-space: initial;
+
+  .dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    margin: auto auto 12px;
+    border-radius: 50%;
+    animation: blinking-dot 1s linear infinite;
+    background: $white-light;
+
+    &:nth-child(2) {
+      animation-delay: 0.33s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.66s;
+    }
+  }
+}
+
 @mixin borderless-status-icon($color) {
   svg {
     border: 1px solid $color;

app/assets/stylesheets/pages/builds.scss

@@ -9,25 +9,21 @@
   }
 }
 
-@keyframes blinking-dots {
+@keyframes blinking-dot {
   0% {
-    background-color: rgba($white-light, 1);
+    opacity: 1;
-    box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 0.2);
   }
 
   25% {
-    background-color: rgba($white-light, 0.4);
+    opacity: 0.4;
-    box-shadow: 12px 0 0 0 rgba($white-light, 2), 24px 0 0 0 rgba($white-light, 0.2);
   }
 
   75% {
-    background-color: rgba($white-light, 0.4);
+    opacity: 0.4;
-    box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 1);
   }
 
   100% {
-    background-color: rgba($white-light, 1);
+    opacity: 1;
-    box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 0.2);
   }
 }
 
@@ -182,12 +178,7 @@
   }
 
   .build-loader-animation {
-    position: relative;
+    @include build-loader-animation;
-    width: 6px;
-    height: 6px;
-    margin: auto auto 12px 2px;
-    border-radius: 50%;
-    animation: blinking-dots 1s linear infinite;
   }
 }
 

app/views/shared/builds/_build_output.html.haml

@@ -1,3 +1,6 @@
 %pre.build-trace#build-trace
   %code.bash.js-build-output
   .build-loader-animation.js-build-refresh
+    .dot
+    .dot
+    .dot

changelogs/unreleased/49776-pipeline-job-log-page-uses-too-much-cpu-for-loading-animation.yml

@@ -0,0 +1,5 @@
+---
+title: refactor pipeline job log animation to reduce CPU usage
+merge_request: 20915
+author:
+type: performance