Resolve "Pipeline job log page uses too much CPU for loading animation"
This commit is contained in:
parent
3a5885c4cc
commit
a363585b01
|
@ -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>
|
||||||
|
|
|
@ -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 @@
|
||||||
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 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@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 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,3 +1,6 @@
|
||||||
%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
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: refactor pipeline job log animation to reduce CPU usage
|
||||||
|
merge_request: 20915
|
||||||
|
author:
|
||||||
|
type: performance
|
Loading…
Reference in New Issue