`<Timeline>` only needs whether someone is typing, not who

ts/components/conversation/Timeline.stories.tsx

@@ -24,7 +24,6 @@ import { ContactSpoofingType } from '../../util/contactSpoofing';
 import { ReadStatus } from '../../messages/MessageReadStatus';
 import type { WidthBreakpoint } from '../_util';
 import { ThemeType } from '../../types/Util';
-import { UUID } from '../../types/UUID';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -525,7 +524,7 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   renderItem,
   renderHeroRow,
   renderTypingBubble,
-  typingContactId: overrideProps.typingContactId,
+  isSomeoneTyping: overrideProps.isSomeoneTyping || false,
 
   ...actions(),
 });
@@ -596,9 +595,7 @@ story.add('Target Index to Top', () => {
 });
 
 story.add('Typing Indicator', () => {
-  const props = useProps({
-    typingContactId: UUID.generate().toString(),
-  });
+  const props = useProps({ isSomeoneTyping: true });
 
   return <Timeline {...props} />;
 });

ts/components/conversation/Timeline.tsx

@@ -93,7 +93,7 @@ type PropsHousekeepingType = {
   isConversationSelected: boolean;
   isGroupV1AndDisabled?: boolean;
   isIncomingMessageRequest: boolean;
-  typingContactId?: string;
+  isSomeoneTyping: boolean;
   unreadCount?: number;
 
   selectedMessageId?: string;
@@ -517,18 +517,18 @@ export class Timeline extends React.Component<
 
     const {
       isLoadingMessages: wasLoadingMessages,
+      isSomeoneTyping: wasSomeoneTyping,
       items: oldItems,
       scrollToIndexCounter: oldScrollToIndexCounter,
-      typingContactId: oldTypingContactId,
     } = prevProps;
     const {
       isIncomingMessageRequest,
       isLoadingMessages,
+      isSomeoneTyping,
       items: newItems,
       oldestUnreadIndex,
       scrollToIndex,
       scrollToIndexCounter: newScrollToIndexCounter,
-      typingContactId,
     } = this.props;
 
     const isDoingInitialLoad = isLoadingMessages && newItems.length === 0;
@@ -557,10 +557,7 @@ export class Timeline extends React.Component<
       return { scrollBottom: 0 };
     }
 
-    if (
-      Boolean(typingContactId) !== Boolean(oldTypingContactId) &&
-      this.isAtBottom()
-    ) {
+    if (isSomeoneTyping !== wasSomeoneTyping && this.isAtBottom()) {
       return { scrollBottom: 0 };
     }
 
@@ -742,6 +739,7 @@ export class Timeline extends React.Component<
       isConversationSelected,
       isGroupV1AndDisabled,
       isLoadingMessages,
+      isSomeoneTyping,
       items,
       oldestUnreadIndex,
       onBlock,
@@ -757,7 +755,6 @@ export class Timeline extends React.Component<
       showContactModal,
       theme,
       totalUnread,
-      typingContactId,
       unblurAvatar,
       unreadCount,
       updateSharedGroups,
@@ -1057,7 +1054,7 @@ export class Timeline extends React.Component<
 
                   {messageNodes}
 
-                  {typingContactId && renderTypingBubble(id)}
+                  {isSomeoneTyping && renderTypingBubble(id)}
                 </div>
               </div>
 

ts/state/smart/Timeline.tsx

@@ -287,7 +287,6 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
     ...pick(conversation, [
       'areWeAdmin',
       'unreadCount',
-      'typingContactId',
       'isGroupV1AndDisabled',
     ]),
     isConversationSelected: state.conversations.selectedConversationId === id,
@@ -295,6 +294,7 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
       conversation.messageRequestsEnabled &&
         !conversation.acceptedMessageRequest
     ),
+    isSomeoneTyping: Boolean(conversation.typingContactId),
     ...conversationMessages,
     invitedContactsForNewlyCreatedGroup:
       getInvitedContactsForNewlyCreatedGroup(state),