Decrease GPU usage when window is invisible

This commit is contained in:
Evan Hahn 2021-07-30 13:35:43 -05:00 committed by GitHub
parent 9fb8114691
commit 2d3b1918b3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 40 additions and 54 deletions

View file

@ -1131,21 +1131,10 @@
.module-message__metadata__status-icon--paused,
.module-message__metadata__status-icon--sending {
animation: module-message__metadata__status-icon--spinning 4s linear infinite;
@include light-theme {
@include color-svg('../images/sending.svg', $color-white);
}
@include dark-theme {
@include color-svg('../images/sending.svg', $color-white);
}
}
@keyframes module-message__metadata__status-icon--spinning {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
@include only-when-page-is-visible {
animation: rotate 4s linear infinite;
}
@include color-svg('../images/sending.svg', $color-white);
}
.module-message__metadata__status-icon--sent {
@ -4129,11 +4118,15 @@ button.module-image__border-overlay:focus {
background-color: $color-gray-60;
}
animation: typing-animation 1600ms ease infinite;
@include only-when-page-is-visible {
animation: typing-animation 1600ms ease infinite;
}
}
.module-left-pane .module-typing-animation__dot {
animation-name: typing-animation-bare;
@include only-when-page-is-visible {
animation-name: typing-animation-bare;
}
}
.module-typing-animation__dot--light {
@ -4649,7 +4642,7 @@ button.module-image__border-overlay:focus {
height: 100%;
width: 100%;
animation: spinner-arc-animation 1000ms linear infinite;
animation: rotate 1000ms linear infinite;
@include light-theme {
@include color-svg('../images/spinner-56.svg', $color-gray-60);
@ -4659,18 +4652,6 @@ button.module-image__border-overlay:focus {
}
}
@keyframes spinner-arc-animation {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
// In these --small and --mini sizes, we're exploding our @color-svg mixin so we don't
// have to duplicate our background colors for the dark/ios/size matrix.
@ -6489,8 +6470,9 @@ button.module-image__border-overlay:focus {
}
&--sending {
animation: module-conversation-list__item--contact-or-conversation__contact__message__text__status-icon--spinning
4s linear infinite;
@include only-when-page-is-visible {
animation: rotate 4s linear infinite;
}
@include light-theme {
@include color-svg('../images/sending.svg', $color-gray-60);
}
@ -6664,13 +6646,6 @@ button.module-image__border-overlay:focus {
}
}
@keyframes module-conversation-list__item--contact-or-conversation__contact__message__text__status-icon--spinning {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
// Module: Left Pane
.module-left-pane {