From 24f17f2cf9bc0c0d7c226d224dba85b4f3c38154 Mon Sep 17 00:00:00 2001
From: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>
Date: Fri, 6 Oct 2023 14:30:36 -0700
Subject: [PATCH] Fix group typing bubble less x animation

---
 stylesheets/_modules.scss                     |  5 ++++
 .../conversation/TypingBubble.stories.tsx     | 23 +++++++++++++++++++
 ts/components/conversation/TypingBubble.tsx   |  3 ++-
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index c8dd2507d6e8..f40c601a0de4 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -1379,6 +1379,7 @@ $message-padding-horizontal: 12px;
   display: flex;
   justify-content: center;
   margin-inline-end: 8px;
+  min-width: 28px;
   padding-bottom: 6px;
 
   &--with-reactions {
@@ -1447,6 +1448,10 @@ $message-padding-horizontal: 12px;
   }
 }
 
+.module-message__typing-avatar-spacer {
+  flex: 0 1 24px;
+}
+
 .module-message__unopened-gift-badge {
   width: 240px;
   height: 132px;
diff --git a/ts/components/conversation/TypingBubble.stories.tsx b/ts/components/conversation/TypingBubble.stories.tsx
index afc04bc04766..6c892383ab46 100644
--- a/ts/components/conversation/TypingBubble.stories.tsx
+++ b/ts/components/conversation/TypingBubble.stories.tsx
@@ -113,6 +113,29 @@ Group.story = {
   name: 'Group (1 person typing)',
 };
 
+export function GroupStartsTyping(): JSX.Element {
+  const props = createProps({
+    conversationType: 'group',
+    typingContactIdTimestamps: {},
+  });
+  const [afterTimeoutProps, setAfterTimeoutProps] = useState({});
+  useEffect(() => {
+    setTimeout(
+      () =>
+        setAfterTimeoutProps({
+          typingContactIdTimestamps: getTypingContactIdTimestamps(1),
+        }),
+      500
+    );
+  }, []);
+
+  return <TypingBubble {...props} {...afterTimeoutProps} />;
+}
+
+GroupStartsTyping.story = {
+  name: 'Group (0 to 1 person starts typing)',
+};
+
 export function GroupStoppedTyping(): JSX.Element {
   const props = createProps({
     conversationType: 'group',
diff --git a/ts/components/conversation/TypingBubble.tsx b/ts/components/conversation/TypingBubble.tsx
index 98efd4e2e851..363fdaad4435 100644
--- a/ts/components/conversation/TypingBubble.tsx
+++ b/ts/components/conversation/TypingBubble.tsx
@@ -60,7 +60,7 @@ const AVATAR_ANIMATION_PROPS: Record<'visible' | 'hidden', object> = {
   hidden: {
     opacity: 0.5,
     width: '4px', // Match value of module-message__typing-avatar margin-inline-start
-    x: '14px',
+    x: '12px',
     top: '34px',
   },
 };
@@ -200,6 +200,7 @@ function TypingBubbleGroupAvatars({
   // Avatars are rendered Right-to-Left so the leftmost avatars can render on top.
   return (
     <div className="module-message__author-avatar-container module-message__author-avatar-container--typing">
+      <div className="module-message__typing-avatar-spacer" />
       {typingContactsOverflowCount > 0 && (
         <div
           className="module-message__typing-avatar module-message__typing-avatar--overflow-count