From a3e2ed3b94ad753286b58d935bd1202545517f53 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sun, 8 Aug 2021 18:46:27 +0100
Subject: [PATCH] Revert typing indicator changes.

---
 .../common/messaging/bars/TypingIndicator.tsx | 49 ++++++++-----------
 1 file changed, 20 insertions(+), 29 deletions(-)

diff --git a/src/components/common/messaging/bars/TypingIndicator.tsx b/src/components/common/messaging/bars/TypingIndicator.tsx
index 0e8cc3ff..2681a9a6 100644
--- a/src/components/common/messaging/bars/TypingIndicator.tsx
+++ b/src/components/common/messaging/bars/TypingIndicator.tsx
@@ -5,11 +5,6 @@ import styled from "styled-components";
 
 import { Text } from "preact-i18n";
 
-import { TextReact } from "../../../../lib/i18n";
-
-import UserIcon from "../../user/UserIcon";
-import { Username } from "../../user/UserShort";
-
 interface Props {
     channel: Channel;
 }
@@ -36,8 +31,15 @@ const Base = styled.div`
     .avatars {
         display: flex;
 
-        :not(:first-child) {
-            margin-left: -4px;
+        img {
+            width: 16px;
+            height: 16px;
+            object-fit: cover;
+            border-radius: 50%;
+
+            &:not(:first-child) {
+                margin-left: -4px;
+            }
         }
     }
 
@@ -67,34 +69,24 @@ export default observer(({ channel }: Props) => {
         if (users.length >= 5) {
             text = <Text id="app.main.channel.typing.several" />;
         } else if (users.length > 1) {
-            const userlist = [...users].map((x) => (
-                <Username key={x!._id} user={x} showServerIdentity />
-            ));
-            //const user = userlist.pop();
-
-            for (let i = 0; i < userlist.length - 1; i++) {
-                userlist.splice(i * 2 + 1, 0, <span key={`sep_${i}`}>, </span>);
-            }
+            const userlist = [...users].map((x) => x!.username);
+            const user = userlist.pop();
 
             text = (
-                userlist
-                /*<TextReact
+                <Text
                     id="app.main.channel.typing.multiple"
                     fields={{
                         user,
-                        userlist,
+                        userlist: userlist.join(", "),
                     }}
-                />*/
+                />
             );
         } else {
             text = (
-                <Username user={users[0]} showServerIdentity />
-                /*<TextReact
+                <Text
                     id="app.main.channel.typing.single"
-                    fields={{
-                        user: <Username user={users[0]} showServerIdentity />,
-                    }}
-                />*/
+                    fields={{ user: users[0]!.username }}
+                />
             );
         }
 
@@ -103,11 +95,10 @@ export default observer(({ channel }: Props) => {
                 <div>
                     <div className="avatars">
                         {users.map((user) => (
-                            <UserIcon
+                            <img
                                 key={user!._id}
-                                target={user}
-                                size={16}
-                                showServerIdentity
+                                loading="eager"
+                                src={user!.generateAvatarURL({ max_side: 256 })}
                             />
                         ))}
                     </div>