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

refactor(comments): reduce initial load wait and add discovered

Browse Source
This commit is contained in:
enes 2024-11-14 16:50:37 +01:00
parent 18bbc12776
commit 2ed81c857c
1 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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