fix load older messages on DM scroll

src/components/@shared/Orbis/DirectMessages/Conversation.module.css

@@ -8,9 +8,9 @@
   padding: calc(var(--spacer) / 4);
   text-align: center;
   color: var(--color-secondary);
-  -webkit-animation: pulse 2s ease-in-out 0s infinite forwards;
-  -moz-animation: pulse 2s ease-in-out 0s infinite forwards;
-  animation: pulse 2s ease-in-out 0s infinite forwards;
+  -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  -moz-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 .connectLit {
@@ -66,6 +66,10 @@
   max-width: 80%;
 }
 
+.pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 .chatBubble {
   display: inline-block;
   background-color: var(--color-primary);
@@ -113,13 +117,7 @@
 }
 
 @keyframes pulse {
-  0% {
-    opacity: 1;
-  }
   50% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
+    opacity: 0.5;
   }
 }

src/components/@shared/Orbis/DirectMessages/Conversation.tsx

@@ -17,7 +17,7 @@ export default function DmConversation() {
   const [isLoading, setIsLoading] = useState(false)
   const [messages, setMessages] = useState<IOrbisMessage[]>([])
   const [currentPage, setCurrentPage] = useState(0)
-  const [hasMore, setHasMore] = useState(false)
+  const [hasMore, setHasMore] = useState(true)
   const [newMessages, setNewMessages] = useState(0)
 
   const scrollToBottom = (smooth = false) => {
@@ -42,6 +42,7 @@ export default function DmConversation() {
     }
 
     if (data) {
+      console.log(data.length)
       data.reverse()
       if (!polling) {
         setHasMore(data.length >= 50)
@@ -61,9 +62,12 @@ export default function DmConversation() {
     setIsLoading(false)
   }
 
-  useInterval(async () => {
-    await getMessages(true)
-  }, 7000)
+  useInterval(
+    async () => {
+      getMessages(true)
+    },
+    !isLoading ? 15000 : false
+  )
 
   const showTime = (index: number): boolean => {
     const nextMessage = messages[index + 1]
@@ -82,7 +86,7 @@ export default function DmConversation() {
   const onScrollMessages = throttle(() => {
     const el = messagesWrapper.current
 
-    if (hasMore && el.scrollTop === 0) {
+    if (hasMore && el.scrollTop <= 50) {
       getMessages()
     }
 
@@ -91,6 +95,14 @@ export default function DmConversation() {
     ) {
       setNewMessages(0)
     }
+
+    // Remove scroll listener
+    messagesWrapper.current.removeEventListener('scroll', onScrollMessages)
+
+    // Readd scroll listener
+    setTimeout(() => {
+      messagesWrapper.current.addEventListener('scroll', onScrollMessages)
+    }, 100)
   }, 1000)
 
   useEffect(() => {
@@ -105,13 +117,12 @@ export default function DmConversation() {
 
   useEffect(() => {
     const el = messagesWrapper.current
-
-    el.addEventListener('scroll', onScrollMessages)
+    messagesWrapper.current.addEventListener('scroll', onScrollMessages)
 
     return () => {
       el.removeEventListener('scroll', onScrollMessages)
     }
-  }, [messagesWrapper])
+  }, [messages])
 
   return (
     <div className={styles.conversation}>
@@ -139,6 +150,10 @@ export default function DmConversation() {
                 <div
                   key={index}
                   className={`${styles.message} ${
+                    message.stream_id.startsWith('new_post--')
+                      ? styles.pulse
+                      : ''
+                  } ${
                     account?.did === message.creator_details.did
                       ? styles.right
                       : styles.left

src/components/@shared/Orbis/DirectMessages/DecryptedMessage.tsx

@@ -33,7 +33,7 @@ export default function DecryptedMessage({
   }, [content, orbis])
 
   return (
-    <span className={loading && styles.decrypting}>
+    <span className={loading ? styles.decrypting : ''}>
       {!loading ? decrypted : '---'}
     </span>
   )

src/components/@shared/Orbis/DirectMessages/Postbox.tsx

@@ -49,6 +49,8 @@ export default function Postbox({
       reply_to: replyTo ? replyTo.stream_id : undefined
     }
 
+    const timestamp = Math.floor(Date.now() / 1000)
+
     const _callbackContent: IOrbisMessage = {
       conversation_id: conversationId,
       content,
@@ -62,12 +64,10 @@ export default function Postbox({
       reply_to: replyTo ? replyTo.stream_id : null,
       reply_to_creator_details: replyTo ? replyTo.creator_details : null,
       reply_to_details: replyTo ? replyTo.content : null,
-      stream_id: 'new_post',
-      timestamp: Math.floor(Date.now() / 1000)
+      stream_id: 'new_post--' + timestamp,
+      timestamp
     }
 
-    console.log(_callbackContent)
-
     if (callback) callback(_callbackContent)
     postBoxArea.current.innerText = ''
 

src/components/Profile/Header/index.tsx

@@ -27,12 +27,7 @@ export default function AccountHeader({
   accountId: string
 }): ReactElement {
   const { profile, ownAccount } = useProfile()
-  const {
-    account: orbisAccount,
-    hasLit,
-    createConversation,
-    getDid
-  } = useOrbis()
+  const { account: orbisAccount, createConversation, getDid } = useOrbis()
   const [isShowMore, setIsShowMore] = useState(false)
   const [userDid, setUserDid] = useState<string | undefined>()
 
@@ -70,9 +65,7 @@ export default function AccountHeader({
             >
               Send Direct Message
             </Button>
-            {userDid !== undefined && userDid === null && (
-              <span>User has no Ceramic Network DID</span>
-            )}
+            {userDid === null && <span>User has no Ceramic Network DID</span>}
             {!orbisAccount && <span>Please connect your wallet</span>}
           </div>
         )}