From 622b9df077ec43f6805f19e2bc852ef52434b50e Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Thu, 1 Jul 2021 16:43:10 -0700
Subject: [PATCH] Optimize typing animation

---
 stylesheets/_modules.scss | 45 ++++++++++++---------------------------
 1 file changed, 14 insertions(+), 31 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index a9d513fa9f3..a5e4ab44ca2 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -4293,7 +4293,7 @@ button.module-image__border-overlay:focus {
 
 .module-typing-animation {
   display: inline-flex;
-  flex-directin: row;
+  flex-direction: row;
   align-items: center;
 
   height: 8px;
@@ -4308,6 +4308,7 @@ button.module-image__border-overlay:focus {
   height: 6px;
   width: 6px;
   opacity: 0.4;
+  will-change: transform, opacity;
 
   @include dark-theme {
     background-color: $color-white;
@@ -4315,15 +4316,15 @@ button.module-image__border-overlay:focus {
   @include light-theme {
     background-color: $color-gray-60;
   }
+
+  animation: typing-animation 1600ms ease infinite;
+}
+
+.module-left-pane .module-typing-animation__dot {
+  animation-name: typing-animation-bare;
 }
 
 .module-typing-animation__dot--light {
-  border-radius: 50%;
-
-  height: 6px;
-  width: 6px;
-  opacity: 0.4;
-
   background-color: $color-white;
 
   @include light-theme {
@@ -4331,7 +4332,7 @@ button.module-image__border-overlay:focus {
   }
 }
 
-@keyframes typing-animation-first {
+@keyframes typing-animation {
   0% {
     opacity: 0.4;
   }
@@ -4344,42 +4345,24 @@ button.module-image__border-overlay:focus {
   }
 }
 
-@keyframes typing-animation-second {
-  10% {
+@keyframes typing-animation-bare {
+  0% {
     opacity: 0.4;
   }
-  30% {
-    transform: scale(1.3);
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-}
-
-@keyframes typing-animation-third {
   20% {
-    opacity: 0.4;
+    opacity: 1;
   }
   40% {
-    transform: scale(1.3);
-    opacity: 1;
-  }
-  60% {
     opacity: 0.4;
   }
 }
 
-.module-typing-animation__dot--first {
-  animation: typing-animation-first 1600ms ease infinite;
-}
-
 .module-typing-animation__dot--second {
-  animation: typing-animation-second 1600ms ease infinite;
+  animation-delay: 160ms;
 }
 
 .module-typing-animation__dot--third {
-  animation: typing-animation-third 1600ms ease infinite;
+  animation-delay: 320ms;
 }
 
 .module-typing-animation__spacer {