From ea5f7b65f32c27549bb38f1e1036ac2d9f28a2c8 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Sun, 26 Sep 2021 18:47:37 +0530
Subject: [PATCH] Fixed #115: High CPU usages while idling

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/organisms/room/RoomViewFloating.jsx  |  2 +-
 src/app/organisms/room/RoomViewFloating.scss | 35 ++++++++++++--------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/app/organisms/room/RoomViewFloating.jsx b/src/app/organisms/room/RoomViewFloating.jsx
index 56b7a9be..6ee66995 100644
--- a/src/app/organisms/room/RoomViewFloating.jsx
+++ b/src/app/organisms/room/RoomViewFloating.jsx
@@ -54,7 +54,7 @@ function RoomViewFloating({
   return (
     <>
       <div className={`room-view__typing${isSomeoneTyping(typingMembers) ? ' room-view__typing--open' : ''}`}>
-        <div className="bouncingLoader"><div /></div>
+        <div className="bouncing-loader"><div /></div>
         <Text variant="b2">{getTypingMessage(typingMembers)}</Text>
       </div>
       <div className={`room-view__STB${reachedBottom ? '' : ' room-view__STB--open'}`}>
diff --git a/src/app/organisms/room/RoomViewFloating.scss b/src/app/organisms/room/RoomViewFloating.scss
index 501c9f45..8c4ba7d4 100644
--- a/src/app/organisms/room/RoomViewFloating.scss
+++ b/src/app/organisms/room/RoomViewFloating.scss
@@ -9,10 +9,6 @@
       color: var(--tc-surface-high);
     }
 
-    &--open {
-      transform: translateY(-99%);
-    }
-
     & .text {
       flex: 1;
       min-width: 0;
@@ -22,37 +18,48 @@
       text-overflow: ellipsis;
       margin: 0 var(--sp-tight);
     }
+
+    &--open {
+      transform: translateY(-99%);
+      & .bouncing-loader {
+        & > *,
+        &::after,
+        &::before {
+          animation: bouncing-loader 0.6s infinite alternate;
+        }
+      }
+    }
   }
 
-  .bouncingLoader {
+  .bouncing-loader {
     transform: translateY(2px);
     margin: 0 calc(var(--sp-ultra-tight) / 2);
   }
-  .bouncingLoader > div,
-  .bouncingLoader:before,
-  .bouncingLoader:after {
+  .bouncing-loader > div,
+  .bouncing-loader::before,
+  .bouncing-loader::after {
     display: inline-block;
     width: 8px;
     height: 8px;
     background: var(--tc-surface-high);
     border-radius: 50%;
-    animation: bouncing-loader 0.6s infinite alternate;
   }
   
-  .bouncingLoader:before,
-  .bouncingLoader:after {
+  
+  .bouncing-loader::before,
+  .bouncing-loader::after {
     content: "";
   }
   
-  .bouncingLoader > div {
+  .bouncing-loader > div {
     margin: 0 4px;
   }
   
-  .bouncingLoader > div {
+  .bouncing-loader > div {
     animation-delay: 0.2s;
   }
   
-  .bouncingLoader:after {
+  .bouncing-loader::after {
     animation-delay: 0.4s;
   }