TeaSpeak
/
TeaWeb
1
0
Fork 0
Code Issues 1 Pull Requests Activity

Only updating the partner loading dots if they're visible

canary
WolverinDEV 2020-07-21 12:52:29 +02:00
parent 774a418f48
commit 4bd442f316
2 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
shared/js/ui/frames/side/ConversationUI.tsx
View File

@ -320,7 +320,7 @@ const PartnerTypingIndicator = (props: { events: Registry<ConversationUIEvents>,
return (
<div className={cssStyle.containerPartnerTyping + (isTyping ? "" : " " + cssStyle.hidden)}>
<Translatable>Partner is typing</Translatable> <LoadingDots />
<Translatable>Partner is typing</Translatable> <LoadingDots enabled={isTyping} />
</div>
)
};

6
shared/js/ui/react-elements/LoadingDots.tsx
View File

@ -1,7 +1,7 @@
import {useEffect, useState} from "react";
import * as React from "react";
export const LoadingDots = (props: { maxDots?: number, speed?: number, textOnly?: boolean }) => {
export const LoadingDots = (props: { maxDots?: number, speed?: number, textOnly?: boolean, enabled?: boolean }) => {
let { maxDots, speed } = props;
if(!maxDots || maxDots < 1)
maxDots = 3;
@ -9,6 +9,9 @@ export const LoadingDots = (props: { maxDots?: number, speed?: number, textOnly?
const [dots, setDots] = useState(0);
useEffect(() => {
if(!props.enabled)
return;
const timeout = setTimeout(() => setDots(dots + 1), speed || 500);
return () => clearTimeout(timeout);
});
@ -19,5 +22,6 @@ export const LoadingDots = (props: { maxDots?: number, speed?: number, textOnly?
if(props.textOnly)
return <>{result}</>;
return <div style={{ width: (maxDots / 3) + "em", display: "inline-block", textAlign: "left" }}>{result}</div>;
};