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

5 files changed, 49 insertions, 20 deletions

diff --git a/app/assets/javascripts/ide/components/jobs/detail.vue b/app/assets/javascripts/ide/components/jobs/detail.vue
index f39ce545656..f884c26ed6a 100644
--- a/app/assets/javascripts/ide/components/jobs/detail.vue
+++ b/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>
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 11d332be1be..98bf26a5222 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/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;
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index e5c38a20bf0..e8158cd7f6b 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -9,25 +9,21 @@
   }
 }
 
-@keyframes blinking-dots {
+@keyframes blinking-dot {
   0% {
-    background-color: rgba($white-light, 1);
-    box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 0.2);
+    opacity: 1;
   }
 
   25% {
-    background-color: rgba($white-light, 0.4);
-    box-shadow: 12px 0 0 0 rgba($white-light, 2), 24px 0 0 0 rgba($white-light, 0.2);
+    opacity: 0.4;
   }
 
   75% {
-    background-color: rgba($white-light, 0.4);
-    box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 1);
+    opacity: 0.4;
   }
 
   100% {
-    background-color: rgba($white-light, 1);
-    box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 0.2);
+    opacity: 1;
   }
 }
 
@@ -182,12 +178,7 @@
   }
 
   .build-loader-animation {
-    position: relative;
-    width: 6px;
-    height: 6px;
-    margin: auto auto 12px 2px;
-    border-radius: 50%;
-    animation: blinking-dots 1s linear infinite;
+    @include build-loader-animation;
   }
 }
 
diff --git a/app/views/shared/builds/_build_output.html.haml b/app/views/shared/builds/_build_output.html.haml
index 0e18128a8f1..380fac4d0e4 100644
--- a/app/views/shared/builds/_build_output.html.haml
+++ b/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
diff --git a/changelogs/unreleased/49776-pipeline-job-log-page-uses-too-much-cpu-for-loading-animation.yml b/changelogs/unreleased/49776-pipeline-job-log-page-uses-too-much-cpu-for-loading-animation.yml
new file mode 100644
index 00000000000..96da2436a9f
--- /dev/null
+++ b/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