Commit a363585b authored by Dennis Tang's avatar Dennis Tang Committed by Annabel Gray

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

parent 3a5885c4
...@@ -131,6 +131,9 @@ export default { ...@@ -131,6 +131,9 @@ export default {
v-show="detailJob.isLoading" v-show="detailJob.isLoading"
class="build-loader-animation" class="build-loader-animation"
> >
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div> </div>
</pre> </pre>
</div> </div>
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
border: 0; border: 0;
border-color: $md-area-border; border-color: $md-area-border;
@supports(width: fit-content) { @supports (width: fit-content) {
display: block; display: block;
width: fit-content; width: fit-content;
} }
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
/* http://phrappe.com/css/conditional-css-for-webkit-based-browsers/ */ /* http://phrappe.com/css/conditional-css-for-webkit-based-browsers/ */
@mixin on-webkit-only { @mixin on-webkit-only {
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio: 0) {
@content; @content;
} }
} }
...@@ -164,14 +164,18 @@ ...@@ -164,14 +164,18 @@
bottom: 12px; bottom: 12px;
width: 43px; width: 43px;
height: 30px; height: 30px;
transition-duration: .3s; transition-duration: 0.3s;
-webkit-transform: translateZ(0); -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 { &.scrolling {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transition-duration: .3s; transition-duration: 0.3s;
} }
.fa { .fa {
...@@ -233,6 +237,29 @@ ...@@ -233,6 +237,29 @@
max-width: 100%; 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) { @mixin borderless-status-icon($color) {
svg { svg {
border: 1px solid $color; border: 1px solid $color;
......
...@@ -9,25 +9,21 @@ ...@@ -9,25 +9,21 @@
} }
} }
@keyframes blinking-dots { @keyframes blinking-dot {
0% { 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% { 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% { 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% { 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 @@ ...@@ -182,12 +178,7 @@
} }
.build-loader-animation { .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;
} }
} }
......
%pre.build-trace#build-trace %pre.build-trace#build-trace
%code.bash.js-build-output %code.bash.js-build-output
.build-loader-animation.js-build-refresh .build-loader-animation.js-build-refresh
.dot
.dot
.dot
---
title: refactor pipeline job log animation to reduce CPU usage
merge_request: 20915
author:
type: performance
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment