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 = () => ( ) -export const Dots = () =>
+export const Dots = () => 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) => { ))} + {isLoading && } )