add skeleton for IPFS and IPNS states in thread

This commit is contained in:
Tom
2023-04-29 12:34:47 +02:00
parent 1158f543db
commit d9322a31b4
+20 -9
View File
@@ -444,6 +444,9 @@ const Thread = () => {
<Tooltip id="tooltip" className="tooltip" /> <Tooltip id="tooltip" className="tooltip" />
<BoardForm selectedStyle={selectedStyle}> <BoardForm selectedStyle={selectedStyle}>
{comment !== undefined ? ( {comment !== undefined ? (
comment.state === "fetching-ipfs" ? (
<PostLoader />
) : (
<> <>
<div className="thread"> <div className="thread">
<div className="op-container"> <div className="op-container">
@@ -555,9 +558,7 @@ const Thread = () => {
</div> </div>
</div> </div>
</div> </div>
{comment.state === "fetching-ipns" ? {comment.state === "fetching-ipns" ? <PostLoader /> : null}
(null) :
(comment.replyCount === undefined ? (<PostLoader />) : (null))}
{sortedReplies.map((reply, index) => { {sortedReplies.map((reply, index) => {
const replyMediaInfo = getCommentMediaInfo(reply); const replyMediaInfo = getCommentMediaInfo(reply);
const fallbackImgUrl = "/assets/filedeleted-res.gif"; const fallbackImgUrl = "/assets/filedeleted-res.gif";
@@ -946,10 +947,22 @@ const Thread = () => {
<span id="button" onClick={() => {setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</span> <span id="button" onClick={() => {setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</span>
] ]
</span> </span>
{comment.replyCount > 0 ? ( {comment ? (
<span className="reply-stat">{comment.replyCount} replies</span> comment.replyCount !== undefined ? (
comment.replyCount > 0 ? (
comment.replyCount === 1 ? (
<span className="reply-stat">{comment.replyCount} reply</span>
) : (
<span className="reply-stat">{comment.replyCount} replies</span>
)
) : (
<span className="reply-stat">No replies yet</span>
)
) : (
<span className="reply-stat">{formatState(comment.state)}</span>
)
) : ( ) : (
<span className="reply-stat">No replies yet</span> <span className="reply-stat">{formatState(comment.state)}</span>
)} )}
<hr /> <hr />
</div> </div>
@@ -1020,9 +1033,7 @@ const Thread = () => {
</div> </div>
) : (null)} ) : (null)}
</> </>
) : ( )) : null}
<PostLoader />
)}
</BoardForm> </BoardForm>
<Footer selectedStyle={selectedStyle}> <Footer selectedStyle={selectedStyle}>
<Break id="break" selectedStyle={selectedStyle} style={{ <Break id="break" selectedStyle={selectedStyle} style={{