mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
improved performance from tooltips, slice
This commit is contained in:
plebbitor
@@ -44,10 +44,8 @@ const Board = () => {
|
||||
const navigate = useNavigate();
|
||||
const [prevScrollPos, setPrevScrollPos] = useState(0);
|
||||
const [visible, setVisible] = useState(true);
|
||||
const [endIndex, setEndIndex] = useState(5);
|
||||
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
|
||||
const [selectedFeed, setSelectedFeed] = useState(feed);
|
||||
const renderedFeed = selectedFeed.slice(0, endIndex);
|
||||
const { subplebbitAddress } = useParams();
|
||||
const handleClickForm = useClickForm();
|
||||
|
||||
@@ -80,17 +78,11 @@ const Board = () => {
|
||||
}, [prevScrollPos, visible]);
|
||||
|
||||
|
||||
// reset endIndex whenever selectedAddress changes
|
||||
useEffect(() => {
|
||||
setEndIndex(5);
|
||||
}, [selectedAddress]);
|
||||
|
||||
|
||||
const tryLoadMore = async () => {
|
||||
try {
|
||||
await loadMore();
|
||||
setSelectedFeed([...selectedFeed, ...feed]);
|
||||
setEndIndex(endIndex + 2);
|
||||
} catch (e) {
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
}
|
||||
@@ -153,14 +145,6 @@ const Board = () => {
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleScroll = (event) => {
|
||||
const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
|
||||
if (scrollTop + clientHeight >= scrollHeight) {
|
||||
setEndIndex(endIndex + 5);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleVoidClick = () => {};
|
||||
@@ -384,15 +368,16 @@ const Board = () => {
|
||||
</span>
|
||||
</div>
|
||||
</TopBar>
|
||||
<Tooltip id="tooltip" className="tooltip" />
|
||||
<BoardForm selectedStyle={selectedStyle}>
|
||||
<div onScroll={handleScroll} className="board">
|
||||
<div className="board">
|
||||
<InfiniteScroll
|
||||
pageStart={0}
|
||||
loadMore={tryLoadMore}
|
||||
hasMore={hasMore}
|
||||
loader={<PostLoader key="loader" />}
|
||||
>
|
||||
{renderedFeed.map(thread => {
|
||||
{feed.map(thread => {
|
||||
const { replies: { pages: { topAll: { comments } } } } = thread;
|
||||
const { renderedComments, omittedCount } = renderComments(comments);
|
||||
const commentMediaInfo = getCommentMediaInfo(thread);
|
||||
@@ -448,9 +433,8 @@ const Board = () => {
|
||||
{thread.title ? (
|
||||
thread.title.length > 75 ?
|
||||
<Fragment key={`fragment2-${thread.cid}`}>
|
||||
<Tooltip key={`mob-tt-tm-${thread.cid}`} id="tt-title-mobile" className="tooltip" />
|
||||
<span key={`q-${thread.cid}`} className="title"
|
||||
data-tooltip-id="tt-title-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={thread.title}
|
||||
data-tooltip-place="top">
|
||||
{thread.title.slice(0, 75) + " (...)"}
|
||||
@@ -463,9 +447,8 @@ const Board = () => {
|
||||
{thread.author.displayName
|
||||
? thread.author.displayName.length > 20
|
||||
? <Fragment key={`fragment3-${thread.cid}`}>
|
||||
<Tooltip key={`mob-tt-nm-${thread.cid}`} id="tt-name-mobile" className="tooltip" />
|
||||
<span key={`n-${thread.cid}`} className="name"
|
||||
data-tooltip-id="tt-name-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={thread.author.displayName}
|
||||
data-tooltip-place="top">
|
||||
{thread.author.displayName.slice(0, 20) + " (...)"}
|
||||
@@ -479,9 +462,8 @@ const Board = () => {
|
||||
(u/
|
||||
{thread.author.address.length > 15 ?
|
||||
<Fragment key={`fragment4-${thread.cid}`}>
|
||||
<Tooltip key={`mob-tt-am-${thread.cid}`} id="tt-address-mobile" className="tooltip" />
|
||||
<span key={`pa-${thread.cid}`} className="poster-address"
|
||||
data-tooltip-id="tt-address-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={thread.author.address}
|
||||
data-tooltip-place="top">
|
||||
{thread.author.address.slice(0, 15) + "..."}
|
||||
@@ -558,9 +540,8 @@ const Board = () => {
|
||||
{reply.author.displayName
|
||||
? reply.author.displayName.length > 12
|
||||
? <Fragment key={`fragment6-${reply.cid}`}>
|
||||
<Tooltip key={`mob-tt-nm-${reply.cid}`} id="tt-name" className="tooltip" />
|
||||
<span key={`mob-n-${reply.cid}`} className="name"
|
||||
data-tooltip-id="tt-name"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={reply.author.displayName}
|
||||
data-tooltip-place="top">
|
||||
{reply.author.displayName.slice(0, 12) + " (...)"}
|
||||
@@ -575,9 +556,8 @@ const Board = () => {
|
||||
(u/
|
||||
{reply.author.address.length > 12 ?
|
||||
<Fragment key={`fragment7-${reply.cid}`}>
|
||||
<Tooltip key={`mob-tt-am-${reply.cid}`} id="tt-address" className="tooltip" />
|
||||
<span key={`mob-ha-${reply.cid}`}
|
||||
data-tooltip-id="tt-address"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={reply.author.address}
|
||||
data-tooltip-place="top">
|
||||
{reply.author.address.slice(0, 12) + "..."}
|
||||
@@ -649,9 +629,8 @@ const Board = () => {
|
||||
{thread.author.displayName
|
||||
? thread.author.displayName.length > 15
|
||||
? <Fragment key={`fragment9-${thread.cid}`}>
|
||||
<Tooltip key={`mob-tt-nm-${thread.cid}`} id="tt-name-mobile" className="tooltip" />
|
||||
<span key={`mob-n-${thread.cid}`} className="name-mobile"
|
||||
data-tooltip-id="tt-name-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={thread.author.displayName}
|
||||
data-tooltip-place="top">
|
||||
{thread.author.displayName.slice(0, 15) + " (...)"}
|
||||
@@ -666,9 +645,8 @@ const Board = () => {
|
||||
(u/
|
||||
{thread.author.address.length > 15 ?
|
||||
<Fragment key={`fragment10-${thread.cid}`}>
|
||||
<Tooltip key={`mob-tt-am-${thread.cid}`} id="tt-address-mobile" className="tooltip" />
|
||||
<span key={`mob-ha-${thread.cid}`} className="highlight-address-mobile"
|
||||
data-tooltip-id="tt-address-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={thread.author.address}
|
||||
data-tooltip-place="top">
|
||||
{thread.author.address.slice(0, 15) + "..."}
|
||||
@@ -683,9 +661,8 @@ const Board = () => {
|
||||
{thread.title ? (
|
||||
thread.title.length > 30 ?
|
||||
<Fragment key={`fragment11-${thread.cid}`}>
|
||||
<Tooltip key={`mob-tt-tm-${thread.cid}`} id="tt-title-mobile" className="tooltip" />
|
||||
<span key={`mob-t-${thread.cid}`} className="subject-mobile"
|
||||
data-tooltip-id="tt-title-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={thread.title}
|
||||
data-tooltip-place="top">
|
||||
{thread.title.slice(0, 30) + " (...)"}
|
||||
@@ -774,9 +751,8 @@ const Board = () => {
|
||||
{reply.author.displayName
|
||||
? reply.author.displayName.length > 12
|
||||
? <Fragment key={`fragment13-${reply.cid}`}>
|
||||
<Tooltip key={`mob-tt-nm-${reply.cid}`} id="tt-name-mobile" className="tooltip" />
|
||||
<span key={`mob-n-${reply.cid}`} className="name-mobile"
|
||||
data-tooltip-id="tt-name-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={reply.author.displayName}
|
||||
data-tooltip-place="top">
|
||||
{reply.author.displayName.slice(0, 12) + " (...)"}
|
||||
@@ -791,9 +767,8 @@ const Board = () => {
|
||||
(u/
|
||||
{reply.author.address.length > 10 ?
|
||||
<Fragment key={`fragment14-${reply.cid}`}>
|
||||
<Tooltip key={`mob-tt-am-${reply.cid}`} id="tt-address-mobile" className="tooltip" />
|
||||
<span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile"
|
||||
data-tooltip-id="tt-address-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={reply.author.address}
|
||||
data-tooltip-place="top">
|
||||
{reply.author.address.slice(0, 10) + "..."}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, Suspense} from 'react';
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import { Tooltip } from 'react-tooltip';
|
||||
import { useComment, usePublishComment } from '@plebbit/plebbit-react-hooks';
|
||||
@@ -393,6 +393,7 @@ const Thread = () => {
|
||||
)}
|
||||
<hr />
|
||||
</TopBar>
|
||||
<Tooltip id="tooltip" className="tooltip" />
|
||||
<BoardForm selectedStyle={selectedStyle}>
|
||||
{comment !== undefined ? (
|
||||
<>
|
||||
@@ -436,9 +437,8 @@ const Thread = () => {
|
||||
{comment.title ? (
|
||||
comment.title.length > 75 ?
|
||||
<>
|
||||
<Tooltip key={`mob-tt-tm-${comment.cid}`} id="tt-title-mobile" className="tooltip" />
|
||||
<span key={`q-${comment.cid}`} className="title"
|
||||
data-tooltip-id="tt-title-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={comment.title}
|
||||
data-tooltip-place="top">
|
||||
{comment.title.slice(0, 75) + " (...)"}
|
||||
@@ -452,9 +452,8 @@ const Thread = () => {
|
||||
{comment.author?.displayName
|
||||
? comment.author?.displayName.length > 20
|
||||
? <>
|
||||
<Tooltip key={`mob-tt-nm-${comment.cid}`} id="tt-name-mobile" className="tooltip" />
|
||||
<span key={`n-${comment.cid}`} className="name"
|
||||
data-tooltip-id="tt-name-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={comment.author?.displayName}
|
||||
data-tooltip-place="top">
|
||||
{comment.author?.displayName.slice(0, 20) + " (...)"}
|
||||
@@ -470,9 +469,8 @@ const Thread = () => {
|
||||
(u/
|
||||
{comment.author?.address.length > 20 ?
|
||||
<>
|
||||
<Tooltip key={`mob-tt-am-${comment.cid}`} id="tt-address-mobile" className="tooltip" />
|
||||
<span key={`pa-${comment.cid}`} className="poster-address"
|
||||
data-tooltip-id="tt-address-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={comment.author?.address}
|
||||
data-tooltip-place="top">
|
||||
{comment.author?.address.slice(0, 20) + "..."}
|
||||
@@ -517,7 +515,7 @@ const Thread = () => {
|
||||
const renderedComments = renderThreadComments(comment.replies.pages.topAll.comments);
|
||||
return renderedComments.map(reply => {
|
||||
return (
|
||||
<div key={`pc-${reply.cid}`} className="reply-container">
|
||||
<div key={`pc-${reply.cid}-${Math.random()}`} className="reply-container">
|
||||
<div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
|
||||
<div key={`pr-${reply.cid}`} className="post-reply" id="post-reply">
|
||||
<div key={`pi-${reply.cid}`} className="post-info">
|
||||
@@ -526,9 +524,8 @@ const Thread = () => {
|
||||
{reply.author.displayName
|
||||
? reply.author.displayName.length > 20
|
||||
? <>
|
||||
<Tooltip key={`mob-tt-nm-${reply.cid}`} id="tt-name" className="tooltip" />
|
||||
<span key={`mob-n-${reply.cid}`} className="name"
|
||||
data-tooltip-id="tt-name"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={reply.author.displayName}
|
||||
data-tooltip-place="top">
|
||||
{reply.author.displayName.slice(0, 20) + " (...)"}
|
||||
@@ -543,9 +540,8 @@ const Thread = () => {
|
||||
(u/
|
||||
{reply.author.address.length > 20 ?
|
||||
<>
|
||||
<Tooltip key={`mob-tt-am-${reply.cid}`} id="tt-address" className="tooltip" />
|
||||
<span key={`mob-ha-${reply.cid}`}
|
||||
data-tooltip-id="tt-address"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={reply.author.address}
|
||||
data-tooltip-place="top">
|
||||
{reply.author.address.slice(0, 20) + "..."}
|
||||
@@ -592,9 +588,9 @@ const Thread = () => {
|
||||
})
|
||||
})}
|
||||
</div>
|
||||
<div className="thread-mobile">
|
||||
<div className="thread-mobile" key="thread-mobile">
|
||||
<hr />
|
||||
<div className="op-container">
|
||||
<div className="op-container" key="op-container">
|
||||
<div key={`mob-po-${comment.cid}`} className="post op">
|
||||
<div key={`mob-pi-${comment.cid}`} className="post-info-mobile">
|
||||
<button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${comment.cid}`} className="post-menu-button-mobile" onClick={handleVoidClick}>...</button>
|
||||
@@ -602,9 +598,8 @@ const Thread = () => {
|
||||
{comment.author?.displayName
|
||||
? comment.author?.displayName.length > 15
|
||||
? <>
|
||||
<Tooltip key={`mob-tt-nm-${comment.cid}`} id="tt-name-mobile" className="tooltip" />
|
||||
<span key={`mob-n-${comment.cid}`} className="name-mobile"
|
||||
data-tooltip-id="tt-name-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={comment.author?.displayName}
|
||||
data-tooltip-place="top">
|
||||
{comment.author?.displayName.slice(0, 15) + " (...)"}
|
||||
@@ -619,9 +614,8 @@ const Thread = () => {
|
||||
(u/
|
||||
{comment.author?.address.length > 15 ?
|
||||
<>
|
||||
<Tooltip key={`mob-tt-am-${comment.cid}`} id="tt-address-mobile" className="tooltip" />
|
||||
<span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile"
|
||||
data-tooltip-id="tt-address-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={comment.author?.address}
|
||||
data-tooltip-place="top">
|
||||
{comment.author?.address.slice(0, 15) + "..."}
|
||||
@@ -636,9 +630,8 @@ const Thread = () => {
|
||||
{comment.title ? (
|
||||
comment.title.length > 30 ?
|
||||
<>
|
||||
<Tooltip key={`mob-tt-tm-${comment.cid}`} id="tt-title-mobile" className="tooltip" />
|
||||
<span key={`mob-t-${comment.cid}`} className="subject-mobile"
|
||||
data-tooltip-id="tt-title-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={comment.title}
|
||||
data-tooltip-place="top">
|
||||
{comment.title.slice(0, 30) + " (...)"}
|
||||
@@ -701,7 +694,7 @@ const Thread = () => {
|
||||
const renderedComments = renderThreadComments(comment.replies.pages.topAll.comments);
|
||||
return renderedComments.map(reply => {
|
||||
return (
|
||||
<div key={`mob-rc-${reply.cid}`} className="reply-container">
|
||||
<div key={`mob-rc-${reply.cid}-${Math.random()}`} className="reply-container">
|
||||
<div key={`mob-pr-${reply.cid}`} className="post-reply">
|
||||
<div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
|
||||
<button className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
|
||||
@@ -709,9 +702,8 @@ const Thread = () => {
|
||||
{reply.author.displayName
|
||||
? reply.author.displayName.length > 12
|
||||
? <>
|
||||
<Tooltip key={`mob-tt-nm-${reply.cid}`} id="tt-name-mobile" className="tooltip" />
|
||||
<span key={`mob-n-${reply.cid}`} className="name-mobile"
|
||||
data-tooltip-id="tt-name-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={reply.author.displayName}
|
||||
data-tooltip-place="top">
|
||||
{reply.author.displayName.slice(0, 12) + " (...)"}
|
||||
@@ -726,9 +718,8 @@ const Thread = () => {
|
||||
(u/
|
||||
{reply.author.address.length > 12 ?
|
||||
<>
|
||||
<Tooltip key={`mob-tt-am-${reply.cid}`} id="tt-address-mobile" className="tooltip" />
|
||||
<span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile"
|
||||
data-tooltip-id="tt-address-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={reply.author.address}
|
||||
data-tooltip-place="top">
|
||||
{reply.author.address.slice(0, 12) + "..."}
|
||||
@@ -851,7 +842,7 @@ const Thread = () => {
|
||||
</ReplyFormLink>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
) : (
|
||||
<PostLoader />
|
||||
)}
|
||||
</BoardForm>
|
||||
|
||||
Reference in New Issue
Block a user