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

1 files changed, 32 insertions, 5 deletions

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;