degmods/degmods.com
5
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(comments): add initial loading indicator 15sec

Browse Source
This commit is contained in:
enes 2024-11-14 14:38:52 +01:00
parent f7d21807a4
commit 18bbc12776
2 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Spinner.tsx
View File

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

12
src/components/comment/index.tsx
View File

@ -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>
)