From 18bbc127768f81b46bf61a407f71c85cb3557edb Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Thu, 14 Nov 2024 14:38:52 +0100
Subject: [PATCH] fix(comments): add initial loading indicator 15sec

---
 src/components/Spinner.tsx       |  2 +-
 src/components/comment/index.tsx | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
index 8398991..786c6ba 100644
--- a/src/components/Spinner.tsx
+++ b/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>
diff --git a/src/components/comment/index.tsx b/src/components/comment/index.tsx
index eef9997..6e1a030 100644
--- a/src/components/comment/index.tsx
+++ b/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>
   )