From e6aaa586ada0ef0e0661c852497accc55d9f80f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= <larkox@gmail.com>
Date: Fri, 6 May 2022 16:29:16 +0200
Subject: [PATCH] Fix typing (#6243)

* Fix typing

* Do not consider if it is shown to avoid race conditions

Co-authored-by: Daniel Espino <danielespino@MacBook-Pro-de-Daniel.local>
---
 app/components/post_draft/typing/index.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/app/components/post_draft/typing/index.tsx b/app/components/post_draft/typing/index.tsx
index 32118ef7e5..5b1031c746 100644
--- a/app/components/post_draft/typing/index.tsx
+++ b/app/components/post_draft/typing/index.tsx
@@ -47,6 +47,7 @@ function Typing({
 }: Props) {
     const typingHeight = useSharedValue(0);
     const typing = useRef<Array<{id: string; now: number; username: string}>>([]);
+    const timeoutToDisappear = useRef<NodeJS.Timeout>();
     const [refresh, setRefresh] = useState(0);
 
     const theme = useTheme();
@@ -71,6 +72,10 @@ function Typing({
 
         typing.current = typing.current.filter(({id}) => id !== msg.userId);
         typing.current.push({id: msg.userId, now: msg.now, username: msg.username});
+        if (timeoutToDisappear.current) {
+            clearTimeout(timeoutToDisappear.current);
+            timeoutToDisappear.current = undefined;
+        }
         setRefresh(Date.now());
     }, [channelId, rootId]);
 
@@ -85,7 +90,20 @@ function Typing({
         }
 
         typing.current = typing.current.filter(({id, now}) => id !== msg.userId && now !== msg.now);
-        setRefresh(Date.now());
+
+        if (timeoutToDisappear.current) {
+            clearTimeout(timeoutToDisappear.current);
+            timeoutToDisappear.current = undefined;
+        }
+
+        if (typing.current.length === 0) {
+            timeoutToDisappear.current = setTimeout(() => {
+                setRefresh(Date.now());
+                timeoutToDisappear.current = undefined;
+            }, 500);
+        } else {
+            setRefresh(Date.now());
+        }
     }, []);
 
     useEffect(() => {