src/components/comment/CommentsPopup.tsx

@@ -10,7 +10,7 @@ import {
   useParams
 } from 'react-router-dom'
 import { getBlogPageRoute, getModPageRoute, getProfilePageRoute } from 'routes'
-import { UserProfile } from 'types'
+import { CommentEvent, UserProfile } from 'types'
 import { CommentsLoaderResult } from 'types/comments'
 import { adjustTextareaHeight, handleCommentSubmit, hexToNpub } from 'utils'
 import { Reactions } from './Reactions'
@@ -74,7 +74,30 @@ export const CommentsPopup = () => {
     adjustTextareaHeight(e.currentTarget)
   }, [])
 
-  const handleSubmit = handleCommentSubmit(event, setCommentEvents, ndk)
+  const [visible, setVisible] = useState<CommentEvent[]>([])
+  const discoveredCount = commentEvents.length - visible.length
+  const [isLoading, setIsLoading] = useState(true)
+  useEffect(() => {
+    // Initial loading to indicate comments fetching (stop after 5 seconds)
+    const t = window.setTimeout(() => setIsLoading(false), 5000)
+    return () => {
+      window.clearTimeout(t)
+    }
+  }, [])
+  useEffect(() => {
+    if (isLoading) {
+      setVisible(commentEvents)
+    }
+  }, [commentEvents, isLoading])
+  const handleDiscoveredClick = () => {
+    setVisible(commentEvents)
+  }
+  const handleSubmit = handleCommentSubmit(
+    event,
+    setCommentEvents,
+    setVisible,
+    ndk
+  )
 
   const handleComment = async () => {
     setIsSubmitting(true)
@@ -273,8 +296,41 @@ export const CommentsPopup = () => {
               </div>
               {commentEvents.length > 0 && (
                 <>
-                  <h3 className='IBMSMSMBSSCL_CommentNoteRepliesTitle'>
+                  <h3
+                    className='IBMSMSMBSSCL_CommentNoteRepliesTitle'
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'row',
+                      justifyContent: 'space-between'
+                    }}
+                  >
                     Replies
+                    <div
+                      style={{
+                        fontSize: '16px'
+                      }}
+                    >
+                      <button
+                        type='button'
+                        className='btnMain'
+                        onClick={
+                          discoveredCount ? handleDiscoveredClick : undefined
+                        }
+                      >
+                        <span>
+                          {isLoading ? (
+                            <>
+                              Discovering replies
+                              <Dots />
+                            </>
+                          ) : discoveredCount ? (
+                            <>Load {discoveredCount} discovered replies</>
+                          ) : (
+                            <>No new replies</>
+                          )}
+                        </span>
+                      </button>
+                    </div>
                   </h3>
                   <div className='pUMCB_RepliesToPrime'>
                     {commentEvents.map((reply) => (

src/components/comment/index.tsx

@@ -1,4 +1,4 @@
-import { Spinner } from 'components/Spinner'
+import { Dots } from 'components/Spinner'
 import { useNDKContext } from 'hooks'
 import { useComments } from 'hooks/useComments'
 import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react'
@@ -48,12 +48,16 @@ export const Comments = ({ addressable, setCommentCount }: Props) => {
     setCommentCount(commentEvents.length)
   }, [commentEvents, setCommentCount])
 
-  const handleSubmit = handleCommentSubmit(event, setCommentEvents, ndk)
-
   const handleDiscoveredClick = () => {
     setVisible(commentEvents)
   }
   const [visible, setVisible] = useState<CommentEvent[]>([])
+  const handleSubmit = handleCommentSubmit(
+    event,
+    setCommentEvents,
+    setVisible,
+    ndk
+  )
   useEffect(() => {
     if (isLoading) {
       setVisible(commentEvents)
@@ -93,17 +97,24 @@ export const Comments = ({ addressable, setCommentCount }: Props) => {
         {/* Hide comment form if aTag is missing */}
         {!!addressable.aTag && <CommentForm handleSubmit={handleSubmit} />}
         <div>
-          {isLoading ? (
-            <Spinner />
-          ) : (
           <button
             type='button'
             className='btnMain'
             onClick={discoveredCount ? handleDiscoveredClick : undefined}
           >
-              <span>Load {discoveredCount} discovered comments</span>
-            </button>
+            <span>
+              {isLoading ? (
+                <>
+                  Discovering comments
+                  <Dots />
+                </>
+              ) : discoveredCount ? (
+                <>Load {discoveredCount} discovered comments</>
+              ) : (
+                <>No new comments</>
               )}
+            </span>
+          </button>
         </div>
         <Filter
           filterOptions={filterOptions}

src/utils/comments.ts

@@ -6,6 +6,7 @@ import { log, LogType } from './utils'
 export function handleCommentSubmit(
   event: NDKEvent | undefined,
   setCommentEvents: React.Dispatch<React.SetStateAction<CommentEvent[]>>,
+  setVisible: React.Dispatch<React.SetStateAction<CommentEvent[]>>,
   ndk: NDK
 ) {
   return async (content: string): Promise<boolean> => {
@@ -19,13 +20,18 @@ export function handleCommentSubmit(
       const reply = event.reply()
       reply.content = content.trim()
 
-      setCommentEvents((prev) => [
+      setCommentEvents((prev) => {
+        const newCommentEvents = [
           {
             event: reply,
             status: CommentEventStatus.Publishing
           },
           ...prev
-      ])
+        ]
+        setVisible(newCommentEvents)
+        return newCommentEvents
+      })
+
       if (!ndk.signer) {
         ndk.signer = new NDKNip07Signer()
       }
@@ -33,8 +39,8 @@ export function handleCommentSubmit(
       id = reply.id
       const relaySet = await reply.publish()
       if (relaySet.size) {
-        setCommentEvents((prev) =>
-          prev.map((ce) => {
+        setCommentEvents((prev) => {
+          const newCommentEvents = prev.map((ce) => {
             if (ce.event.id === reply.id) {
               return {
                 event: ce.event,
@@ -43,23 +49,27 @@ export function handleCommentSubmit(
             }
             return ce
           })
-        )
+          setVisible(newCommentEvents)
+          return newCommentEvents
+        })
         // when an event is successfully published remove the status from it after 15 seconds
         setTimeout(() => {
-          setCommentEvents((prev) =>
-            prev.map((ce) => {
+          setCommentEvents((prev) => {
+            const newCommentEvents = prev.map((ce) => {
               if (ce.event.id === reply.id) {
                 delete ce.status
               }
 
               return ce
             })
-          )
+            setVisible(newCommentEvents)
+            return newCommentEvents
+          })
         }, 15000)
       } else {
         log(true, LogType.Error, 'Publishing reply failed.')
-        setCommentEvents((prev) =>
-          prev.map((ce) => {
+        setCommentEvents((prev) => {
+          const newCommentEvents = prev.map((ce) => {
             if (ce.event.id === reply.id) {
               return {
                 event: ce.event,
@@ -68,14 +78,16 @@ export function handleCommentSubmit(
             }
             return ce
           })
-        )
+          setVisible(newCommentEvents)
+          return newCommentEvents
+        })
       }
       return false
     } catch (error) {
       toast.error('An error occurred in publishing reply.')
       log(true, LogType.Error, 'An error occurred in publishing reply.', error)
-      setCommentEvents((prev) =>
-        prev.map((ce) => {
+      setCommentEvents((prev) => {
+        const newCommentEvents = prev.map((ce) => {
           if (ce.event.id === id) {
             return {
               event: ce.event,
@@ -84,7 +96,9 @@ export function handleCommentSubmit(
           }
           return ce
         })
-      )
+        setVisible(newCommentEvents)
+        return newCommentEvents
+      })
       return false
     }
   }