From 5398f45a261548492824d83eac60bf8cdb9ce021 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Mon, 3 Apr 2023 14:09:06 +0200
Subject: [PATCH] fix: typing animation alignment

---
 ts/components/conversation/SessionMessagesListContainer.tsx | 6 +++++-
 ts/session/apis/snode_api/swarmPolling.ts                   | 2 ++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/ts/components/conversation/SessionMessagesListContainer.tsx b/ts/components/conversation/SessionMessagesListContainer.tsx
index 5d97d2ea4..1a4eb03f3 100644
--- a/ts/components/conversation/SessionMessagesListContainer.tsx
+++ b/ts/components/conversation/SessionMessagesListContainer.tsx
@@ -71,6 +71,10 @@ const StyledMessagesContainer = styled.div<{}>`
   }
 `;
 
+const StyledTypingBubble = styled(TypingBubble)`
+  margin: var(--margins-xs) var(--margins-lg) 0;
+`;
+
 class SessionMessagesListContainerInner extends React.Component<Props> {
   private timeoutResetQuotedScroll: NodeJS.Timeout | null = null;
 
@@ -120,7 +124,7 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
         ref={this.props.messageContainerRef}
         data-testid="messages-container"
       >
-        <TypingBubble
+        <StyledTypingBubble
           conversationType={conversation.type}
           isTyping={!!conversation.isTyping}
           key="typing-bubble"
diff --git a/ts/session/apis/snode_api/swarmPolling.ts b/ts/session/apis/snode_api/swarmPolling.ts
index 4d4c8230e..3784abdb6 100644
--- a/ts/session/apis/snode_api/swarmPolling.ts
+++ b/ts/session/apis/snode_api/swarmPolling.ts
@@ -360,6 +360,8 @@ export class SwarmPolling {
     const newMessages = messages.filter((m: Message) => !dupHashes.includes(m.hash));
 
     if (newMessages.length) {
+      // TODO explain this better
+      // NOTE setting expiresAt here will trigger disappearing messages via the listener
       const newHashes = newMessages.map((m: Message) => ({
         expiresAt: m.expiration,
         hash: m.hash,