hippoz/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fixed #115: High CPU usages while idling

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-09-26 18:47:37 +05:30
parent 9ce95da8f4
commit ea5f7b65f3
2 changed files with 22 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/organisms/room/RoomViewFloating.jsx
View file

@ -54,7 +54,7 @@ function RoomViewFloating({
return ( return (
<> <>
<div className={`room-view__typing${isSomeoneTyping(typingMembers) ? ' room-view__typing--open' : ''}`}> <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> <Text variant="b2">{getTypingMessage(typingMembers)}</Text>
</div> </div>
<div className={`room-view__STB${reachedBottom ? '' : ' room-view__STB--open'}`}> <div className={`room-view__STB${reachedBottom ? '' : ' room-view__STB--open'}`}>

35
src/app/organisms/room/RoomViewFloating.scss
View file

@ -9,10 +9,6 @@
color: var(--tc-surface-high); color: var(--tc-surface-high);
} }
&--open {
transform: translateY(-99%);
}
& .text { & .text {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
@ -22,37 +18,48 @@
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 0 var(--sp-tight); 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); transform: translateY(2px);
margin: 0 calc(var(--sp-ultra-tight) / 2); margin: 0 calc(var(--sp-ultra-tight) / 2);
} }
.bouncingLoader > div, .bouncing-loader > div,
.bouncingLoader:before, .bouncing-loader::before,
.bouncingLoader:after { .bouncing-loader::after {
display: inline-block; display: inline-block;
width: 8px; width: 8px;
height: 8px; height: 8px;
background: var(--tc-surface-high); background: var(--tc-surface-high);
border-radius: 50%; border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
} }
.bouncingLoader:before,
.bouncingLoader:after { .bouncing-loader::before,
.bouncing-loader::after {
content: ""; content: "";
} }
.bouncingLoader > div { .bouncing-loader > div {
margin: 0 4px; margin: 0 4px;
} }
.bouncingLoader > div { .bouncing-loader > div {
animation-delay: 0.2s; animation-delay: 0.2s;
} }
.bouncingLoader:after { .bouncing-loader::after {
animation-delay: 0.4s; animation-delay: 0.4s;
} }