src/components/comment/index.tsx

@@ -62,8 +62,8 @@ export const Comments = ({ addressable, setCommentCount }: Props) => {
 
   const [isLoading, setIsLoading] = useState(true)
   useEffect(() => {
-    // Initial loading to indicate comments fetching (stop after 15 seconds)
-    const t = window.setTimeout(() => setIsLoading(false), 15000)
+    // Initial loading to indicate comments fetching (stop after 5 seconds)
+    const t = window.setTimeout(() => setIsLoading(false), 5000)
     return () => {
       window.clearTimeout(t)
     }
@@ -185,8 +185,18 @@ export const Comments = ({ addressable, setCommentCount }: Props) => {
     return true
   }
 
+  const handleDiscoveredClick = () => {
+    setVisible(commentEvents)
+  }
+  const [visible, setVisible] = useState<CommentEvent[]>([])
+  useEffect(() => {
+    if (isLoading) {
+      setVisible(commentEvents)
+    }
+  }, [commentEvents, isLoading])
+
   const comments = useMemo(() => {
-    let filteredComments = commentEvents
+    let filteredComments = visible
     if (filterOptions.author === AuthorFilterEnum.Creator_Comments) {
       filteredComments = filteredComments.filter(
         (comment) => comment.pubkey === addressable.author
@@ -200,14 +210,28 @@ export const Comments = ({ addressable, setCommentCount }: Props) => {
     }
 
     return filteredComments
-  }, [commentEvents, filterOptions, addressable.author])
+  }, [visible, filterOptions.author, filterOptions.sort, addressable.author])
 
+  const discoveredCount = commentEvents.length - visible.length
   return (
     <div className='IBMSMSMBSSCommentsWrapper'>
       <h4 className='IBMSMSMBSSTitle'>Comments</h4>
       <div className='IBMSMSMBSSComments'>
         {/* 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>
+          )}
+        </div>
         <Filter
           filterOptions={filterOptions}
           setFilterOptions={setFilterOptions}
@@ -217,7 +241,6 @@ export const Comments = ({ addressable, setCommentCount }: Props) => {
             <Comment key={event.id} {...event} />
           ))}
         </div>
-        {isLoading && <Spinner />}
       </div>
     </div>
   )