src/components/Spinner.tsx

@@ -6,4 +6,4 @@ export const Spinner = () => (
   </div>
 )
 
-export const Dots = () => <div className={styles.loading}></div>
+export const Dots = () => <span className={styles.loading}></span>

src/components/comment/index.tsx

@@ -1,5 +1,5 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk'
-import { Dots } from 'components/Spinner'
+import { Dots, Spinner } from 'components/Spinner'
 import { ZapPopUp } from 'components/Zap'
 import { formatDate } from 'date-fns'
 import {
@@ -60,6 +60,15 @@ export const Comments = ({ addressable, setCommentCount }: Props) => {
     author: AuthorFilterEnum.All_Comments
   })
 
+  const [isLoading, setIsLoading] = useState(true)
+  useEffect(() => {
+    // Initial loading to indicate comments fetching (stop after 15 seconds)
+    const t = window.setTimeout(() => setIsLoading(false), 15000)
+    return () => {
+      window.clearTimeout(t)
+    }
+  }, [])
+
   useEffect(() => {
     setCommentCount(commentEvents.length)
   }, [commentEvents, setCommentCount])
@@ -208,6 +217,7 @@ export const Comments = ({ addressable, setCommentCount }: Props) => {
             <Comment key={event.id} {...event} />
           ))}
         </div>
+        {isLoading && <Spinner />}
       </div>
     </div>
   )