diff --git a/src/components/common/messaging/bars/TypingIndicator.tsx b/src/components/common/messaging/bars/TypingIndicator.tsx index 0e19a34d7ed19658f8fd0a7ed36f3a9d030c7b2d..6cbee0e487c255d8d3471ed4a0e0506b66389a15 100644 --- a/src/components/common/messaging/bars/TypingIndicator.tsx +++ b/src/components/common/messaging/bars/TypingIndicator.tsx @@ -76,15 +76,19 @@ export function TypingIndicator({ typing }: Props) { if (users.length >= 5) { text = <Text id="app.main.channel.typing.several" />; } else if (users.length > 1) { - const usersCopy = [...users]; + const userlist = [...users].map((x) => <Username user={x} />); + const user = userlist.pop(); + + for (let i = 0; i < userlist.length - 1; i++) { + userlist.splice(i * 2 + 1, 0, <>, </>); + } + text = ( <TextReact id="app.main.channel.typing.multiple" fields={{ - user: <Username user={usersCopy.pop()} />, - userlist: usersCopy - .map((x) => <Username user={x} />) - .join(", "), + user, + userlist, }} /> );