External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

improved performance from tooltips, slice

Browse Source
This commit is contained in:
plebbitor
2023-03-25 21:38:52 +01:00
parent 1d7961de9b
commit 014a00386c
2 changed files with 30 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+13 -38
View File
@@ -44,10 +44,8 @@ const Board = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [prevScrollPos, setPrevScrollPos] = useState(0); const [prevScrollPos, setPrevScrollPos] = useState(0);
const [visible, setVisible] = useState(true); const [visible, setVisible] = useState(true);
const [endIndex, setEndIndex] = useState(5);
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'}); const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
const [selectedFeed, setSelectedFeed] = useState(feed); const [selectedFeed, setSelectedFeed] = useState(feed);
const renderedFeed = selectedFeed.slice(0, endIndex);
const { subplebbitAddress } = useParams(); const { subplebbitAddress } = useParams();
const handleClickForm = useClickForm(); const handleClickForm = useClickForm();
@@ -80,17 +78,11 @@ const Board = () => {
}, [prevScrollPos, visible]); }, [prevScrollPos, visible]);
// reset endIndex whenever selectedAddress changes
useEffect(() => {
setEndIndex(5);
}, [selectedAddress]);
const tryLoadMore = async () => { const tryLoadMore = async () => {
try { try {
await loadMore(); await loadMore();
setSelectedFeed([...selectedFeed, ...feed]);
setEndIndex(endIndex + 2);
} catch (e) { } catch (e) {
await new Promise(resolve => setTimeout(resolve, 1000)); 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 = () => {}; const handleVoidClick = () => {};
@@ -384,15 +368,16 @@ const Board = () => {
</span> </span>
</div> </div>
</TopBar> </TopBar>
<Tooltip id="tooltip" className="tooltip" />
<BoardForm selectedStyle={selectedStyle}> <BoardForm selectedStyle={selectedStyle}>
<div onScroll={handleScroll} className="board"> <div className="board">
<InfiniteScroll <InfiniteScroll
pageStart={0} pageStart={0}
loadMore={tryLoadMore} loadMore={tryLoadMore}
hasMore={hasMore} hasMore={hasMore}
loader={<PostLoader key="loader" />} loader={<PostLoader key="loader" />}
> >
{renderedFeed.map(thread => { {feed.map(thread => {
const { replies: { pages: { topAll: { comments } } } } = thread; const { replies: { pages: { topAll: { comments } } } } = thread;
const { renderedComments, omittedCount } = renderComments(comments); const { renderedComments, omittedCount } = renderComments(comments);
const commentMediaInfo = getCommentMediaInfo(thread); const commentMediaInfo = getCommentMediaInfo(thread);
@@ -448,9 +433,8 @@ const Board = () => {
{thread.title ? ( {thread.title ? (
thread.title.length > 75 ? thread.title.length > 75 ?
<Fragment key={`fragment2-${thread.cid}`}> <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" <span key={`q-${thread.cid}`} className="title"
data-tooltip-id="tt-title-mobile" data-tooltip-id="tooltip"
data-tooltip-content={thread.title} data-tooltip-content={thread.title}
data-tooltip-place="top"> data-tooltip-place="top">
{thread.title.slice(0, 75) + " (...)"} {thread.title.slice(0, 75) + " (...)"}
@@ -463,9 +447,8 @@ const Board = () => {
{thread.author.displayName {thread.author.displayName
? thread.author.displayName.length > 20 ? thread.author.displayName.length > 20
? <Fragment key={`fragment3-${thread.cid}`}> ? <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" <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-content={thread.author.displayName}
data-tooltip-place="top"> data-tooltip-place="top">
{thread.author.displayName.slice(0, 20) + " (...)"} {thread.author.displayName.slice(0, 20) + " (...)"}
@@ -479,9 +462,8 @@ const Board = () => {
(u/ (u/
{thread.author.address.length > 15 ? {thread.author.address.length > 15 ?
<Fragment key={`fragment4-${thread.cid}`}> <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" <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-content={thread.author.address}
data-tooltip-place="top"> data-tooltip-place="top">
{thread.author.address.slice(0, 15) + "..."} {thread.author.address.slice(0, 15) + "..."}
@@ -558,9 +540,8 @@ const Board = () => {
{reply.author.displayName {reply.author.displayName
? reply.author.displayName.length > 12 ? reply.author.displayName.length > 12
? <Fragment key={`fragment6-${reply.cid}`}> ? <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" <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-content={reply.author.displayName}
data-tooltip-place="top"> data-tooltip-place="top">
{reply.author.displayName.slice(0, 12) + " (...)"} {reply.author.displayName.slice(0, 12) + " (...)"}
@@ -575,9 +556,8 @@ const Board = () => {
(u/ (u/
{reply.author.address.length > 12 ? {reply.author.address.length > 12 ?
<Fragment key={`fragment7-${reply.cid}`}> <Fragment key={`fragment7-${reply.cid}`}>
<Tooltip key={`mob-tt-am-${reply.cid}`} id="tt-address" className="tooltip" />
<span key={`mob-ha-${reply.cid}`} <span key={`mob-ha-${reply.cid}`}
data-tooltip-id="tt-address" data-tooltip-id="tooltip"
data-tooltip-content={reply.author.address} data-tooltip-content={reply.author.address}
data-tooltip-place="top"> data-tooltip-place="top">
{reply.author.address.slice(0, 12) + "..."} {reply.author.address.slice(0, 12) + "..."}
@@ -649,9 +629,8 @@ const Board = () => {
{thread.author.displayName {thread.author.displayName
? thread.author.displayName.length > 15 ? thread.author.displayName.length > 15
? <Fragment key={`fragment9-${thread.cid}`}> ? <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" <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-content={thread.author.displayName}
data-tooltip-place="top"> data-tooltip-place="top">
{thread.author.displayName.slice(0, 15) + " (...)"} {thread.author.displayName.slice(0, 15) + " (...)"}
@@ -666,9 +645,8 @@ const Board = () => {
(u/ (u/
{thread.author.address.length > 15 ? {thread.author.address.length > 15 ?
<Fragment key={`fragment10-${thread.cid}`}> <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" <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-content={thread.author.address}
data-tooltip-place="top"> data-tooltip-place="top">
{thread.author.address.slice(0, 15) + "..."} {thread.author.address.slice(0, 15) + "..."}
@@ -683,9 +661,8 @@ const Board = () => {
{thread.title ? ( {thread.title ? (
thread.title.length > 30 ? thread.title.length > 30 ?
<Fragment key={`fragment11-${thread.cid}`}> <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" <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-content={thread.title}
data-tooltip-place="top"> data-tooltip-place="top">
{thread.title.slice(0, 30) + " (...)"} {thread.title.slice(0, 30) + " (...)"}
@@ -774,9 +751,8 @@ const Board = () => {
{reply.author.displayName {reply.author.displayName
? reply.author.displayName.length > 12 ? reply.author.displayName.length > 12
? <Fragment key={`fragment13-${reply.cid}`}> ? <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" <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-content={reply.author.displayName}
data-tooltip-place="top"> data-tooltip-place="top">
{reply.author.displayName.slice(0, 12) + " (...)"} {reply.author.displayName.slice(0, 12) + " (...)"}
@@ -791,9 +767,8 @@ const Board = () => {
(u/ (u/
{reply.author.address.length > 10 ? {reply.author.address.length > 10 ?
<Fragment key={`fragment14-${reply.cid}`}> <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" <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-content={reply.author.address}
data-tooltip-place="top"> data-tooltip-place="top">
{reply.author.address.slice(0, 10) + "..."} {reply.author.address.slice(0, 10) + "..."}
src/components/views/Thread.jsx
+17 -26
View File
@@ -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 { Link, useNavigate, useParams } from 'react-router-dom';
import { Tooltip } from 'react-tooltip'; import { Tooltip } from 'react-tooltip';
import { useComment, usePublishComment } from '@plebbit/plebbit-react-hooks'; import { useComment, usePublishComment } from '@plebbit/plebbit-react-hooks';
@@ -393,6 +393,7 @@ const Thread = () => {
)} )}
<hr /> <hr />
</TopBar> </TopBar>
<Tooltip id="tooltip" className="tooltip" />
<BoardForm selectedStyle={selectedStyle}> <BoardForm selectedStyle={selectedStyle}>
{comment !== undefined ? ( {comment !== undefined ? (
<> <>
@@ -436,9 +437,8 @@ const Thread = () => {
{comment.title ? ( {comment.title ? (
comment.title.length > 75 ? comment.title.length > 75 ?
<> <>
<Tooltip key={`mob-tt-tm-${comment.cid}`} id="tt-title-mobile" className="tooltip" />
<span key={`q-${comment.cid}`} className="title" <span key={`q-${comment.cid}`} className="title"
data-tooltip-id="tt-title-mobile" data-tooltip-id="tooltip"
data-tooltip-content={comment.title} data-tooltip-content={comment.title}
data-tooltip-place="top"> data-tooltip-place="top">
{comment.title.slice(0, 75) + " (...)"} {comment.title.slice(0, 75) + " (...)"}
@@ -452,9 +452,8 @@ const Thread = () => {
{comment.author?.displayName {comment.author?.displayName
? comment.author?.displayName.length > 20 ? 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" <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-content={comment.author?.displayName}
data-tooltip-place="top"> data-tooltip-place="top">
{comment.author?.displayName.slice(0, 20) + " (...)"} {comment.author?.displayName.slice(0, 20) + " (...)"}
@@ -470,9 +469,8 @@ const Thread = () => {
(u/ (u/
{comment.author?.address.length > 20 ? {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" <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-content={comment.author?.address}
data-tooltip-place="top"> data-tooltip-place="top">
{comment.author?.address.slice(0, 20) + "..."} {comment.author?.address.slice(0, 20) + "..."}
@@ -517,7 +515,7 @@ const Thread = () => {
const renderedComments = renderThreadComments(comment.replies.pages.topAll.comments); const renderedComments = renderThreadComments(comment.replies.pages.topAll.comments);
return renderedComments.map(reply => { return renderedComments.map(reply => {
return ( 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={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
<div key={`pr-${reply.cid}`} className="post-reply" id="post-reply"> <div key={`pr-${reply.cid}`} className="post-reply" id="post-reply">
<div key={`pi-${reply.cid}`} className="post-info"> <div key={`pi-${reply.cid}`} className="post-info">
@@ -526,9 +524,8 @@ const Thread = () => {
{reply.author.displayName {reply.author.displayName
? reply.author.displayName.length > 20 ? 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" <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-content={reply.author.displayName}
data-tooltip-place="top"> data-tooltip-place="top">
{reply.author.displayName.slice(0, 20) + " (...)"} {reply.author.displayName.slice(0, 20) + " (...)"}
@@ -543,9 +540,8 @@ const Thread = () => {
(u/ (u/
{reply.author.address.length > 20 ? {reply.author.address.length > 20 ?
<> <>
<Tooltip key={`mob-tt-am-${reply.cid}`} id="tt-address" className="tooltip" />
<span key={`mob-ha-${reply.cid}`} <span key={`mob-ha-${reply.cid}`}
data-tooltip-id="tt-address" data-tooltip-id="tooltip"
data-tooltip-content={reply.author.address} data-tooltip-content={reply.author.address}
data-tooltip-place="top"> data-tooltip-place="top">
{reply.author.address.slice(0, 20) + "..."} {reply.author.address.slice(0, 20) + "..."}
@@ -592,9 +588,9 @@ const Thread = () => {
}) })
})} })}
</div> </div>
<div className="thread-mobile"> <div className="thread-mobile" key="thread-mobile">
<hr /> <hr />
<div className="op-container"> <div className="op-container" key="op-container">
<div key={`mob-po-${comment.cid}`} className="post op"> <div key={`mob-po-${comment.cid}`} className="post op">
<div key={`mob-pi-${comment.cid}`} className="post-info-mobile"> <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> <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
? comment.author?.displayName.length > 15 ? 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" <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-content={comment.author?.displayName}
data-tooltip-place="top"> data-tooltip-place="top">
{comment.author?.displayName.slice(0, 15) + " (...)"} {comment.author?.displayName.slice(0, 15) + " (...)"}
@@ -619,9 +614,8 @@ const Thread = () => {
(u/ (u/
{comment.author?.address.length > 15 ? {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" <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-content={comment.author?.address}
data-tooltip-place="top"> data-tooltip-place="top">
{comment.author?.address.slice(0, 15) + "..."} {comment.author?.address.slice(0, 15) + "..."}
@@ -636,9 +630,8 @@ const Thread = () => {
{comment.title ? ( {comment.title ? (
comment.title.length > 30 ? 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" <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-content={comment.title}
data-tooltip-place="top"> data-tooltip-place="top">
{comment.title.slice(0, 30) + " (...)"} {comment.title.slice(0, 30) + " (...)"}
@@ -701,7 +694,7 @@ const Thread = () => {
const renderedComments = renderThreadComments(comment.replies.pages.topAll.comments); const renderedComments = renderThreadComments(comment.replies.pages.topAll.comments);
return renderedComments.map(reply => { return renderedComments.map(reply => {
return ( 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-pr-${reply.cid}`} className="post-reply">
<div key={`mob-pi-${reply.cid}`} className="post-info-mobile"> <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> <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
? reply.author.displayName.length > 12 ? 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" <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-content={reply.author.displayName}
data-tooltip-place="top"> data-tooltip-place="top">
{reply.author.displayName.slice(0, 12) + " (...)"} {reply.author.displayName.slice(0, 12) + " (...)"}
@@ -726,9 +718,8 @@ const Thread = () => {
(u/ (u/
{reply.author.address.length > 12 ? {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" <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-content={reply.author.address}
data-tooltip-place="top"> data-tooltip-place="top">
{reply.author.address.slice(0, 12) + "..."} {reply.author.address.slice(0, 12) + "..."}
@@ -851,7 +842,7 @@ const Thread = () => {
</ReplyFormLink> </ReplyFormLink>
</div> </div>
</> </>
) : ( ) : (
<PostLoader /> <PostLoader />
)} )}
</BoardForm> </BoardForm>