From b0c97b86f580521de0fe2844f77b8d7c96fc7036 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Tue, 20 Dec 2022 16:12:22 -0800
Subject: [PATCH] prevent flicker of message placeholder

---
 net/web/src/session/conversation/Conversation.jsx  |  2 +-
 .../session/conversation/useConversation.hook.js   | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/net/web/src/session/conversation/Conversation.jsx b/net/web/src/session/conversation/Conversation.jsx
index fb95d189..653ec1cd 100644
--- a/net/web/src/session/conversation/Conversation.jsx
+++ b/net/web/src/session/conversation/Conversation.jsx
@@ -69,7 +69,7 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
         )}
       </div>
       <div class="thread" ref={thread} onScroll={scrollThread}>
-        { state.topics.length === 0 && (
+        { state.delayed && state.topics.length === 0 && (
           <div class="empty">This Topic Has No Messages</div>
         )}
         { state.topics.length !== 0 && (
diff --git a/net/web/src/session/conversation/useConversation.hook.js b/net/web/src/session/conversation/useConversation.hook.js
index d9e3cee0..98128e63 100644
--- a/net/web/src/session/conversation/useConversation.hook.js
+++ b/net/web/src/session/conversation/useConversation.hook.js
@@ -24,6 +24,7 @@ export function useConversation(cardId, channelId) {
     error: false,
     sealed: false,
     sealKey: null,
+    delayed: false,
   });
 
   const account = useContext(AccountContext);
@@ -90,7 +91,10 @@ export function useConversation(cardId, channelId) {
   }, [cardId, channelId, upload]);
 
   useEffect(() => {
-    updateState({ topics: [] });
+    updateState({ delayed: false, topics: [] });
+    setTimeout(() => {
+      updateState({ delayed: true });
+    }, 250);
     conversation.actions.setConversationId(cardId, channelId);
     // eslint-disable-next-line
   }, [cardId, channelId]);
@@ -107,6 +111,14 @@ export function useConversation(cardId, channelId) {
       }
       return 1;
     });
+    if (topics.length) {
+      updateState({ delayed: false });
+    }
+    else {
+      setTimeout(() => {
+        updateState({ delayed: true });
+      }, 250);
+    }
     const { error, loadingInit, loadingMore, subject, logoUrl, logoImg } = conversation.state;
     updateState({ topics, error, loadingInit, loadingMore, subject, logoUrl, logoImg });
     store.actions.setValue(`${channelId}::${cardId}`, Number(conversation.state.revision));