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

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

parent 3a5885c4
......@@ -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>
......
......@@ -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;
......
......@@ -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;
}
}
......
%pre.build-trace#build-trace
%code.bash.js-build-output
.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