diff options
author | Dennis Tang <dennis@dennistang.net> | 2018-08-03 17:31:50 +0300 |
---|---|---|
committer | Annabel Gray <annabel.m.gray@gmail.com> | 2018-08-03 17:31:50 +0300 |
commit | a363585b014fa35d7a33bbc68e2b96c4a673e295 (patch) | |
tree | fad350a71e7a78442685790b2e782da01f955446 /app | |
parent | 3a5885c4cc7b5ad99c2eda0368e9c5a0eb60f906 (diff) |
Resolve "Pipeline job log page uses too much CPU for loading animation"
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/ide/components/jobs/detail.vue | 3 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/mixins.scss | 37 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/builds.scss | 21 | ||||
-rw-r--r-- | app/views/shared/builds/_build_output.html.haml | 3 |
4 files changed, 44 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 |