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

Only updating the partner loading dots if they're visible

Browse source
This commit is contained in:
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 ( return (
<div className={cssStyle.containerPartnerTyping + (isTyping ? "" : " " + cssStyle.hidden)}> <div className={cssStyle.containerPartnerTyping + (isTyping ? "" : " " + cssStyle.hidden)}>
<Translatable>Partner is typing</Translatable> <LoadingDots /> <Translatable>Partner is typing</Translatable> <LoadingDots enabled={isTyping} />
</div> </div>
) )
}; };

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

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