diff --git a/src/components/StateLabel.jsx b/src/components/StateLabel.jsx index 9a34357f..6bab4f64 100644 --- a/src/components/StateLabel.jsx +++ b/src/components/StateLabel.jsx @@ -1,18 +1,25 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { useAccountComment } from "@plebbit/plebbit-react-hooks"; import useStateString from "../hooks/useStateString"; -import useGeneralStore from "../hooks/stores/useGeneralStore"; - -const StateLabel = ({ commentCid, className }) => { - const { pendingCommentIndex } = useGeneralStore(state => state); - - const comment = useAccountComment({commentIndex: pendingCommentIndex}); +const StateLabel = ({ commentIndex, className }) => { + const comment = useAccountComment({commentIndex: commentIndex}); const stateString = useStateString(comment); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + const timer = setTimeout(() => setIsLoading(false), 5000); + return () => clearTimeout(timer); + }, []); + + if (commentIndex === undefined) return null; + + console.log(commentIndex, stateString, comment); + return ( - !commentCid && stateString !== "Succeeded" ? ( - comment.state === "failed" ? ( + commentIndex && stateString !== "Succeeded" ? ( + (comment.state === "failed" || (stateString === undefined && !isLoading)) ? (
( @@ -20,16 +27,16 @@ const StateLabel = ({ commentCid, className }) => { Failed
) - + ) : ( - -
- ( - - {stateString} - - ) -
+ +
+ ( + + {stateString} + + ) +
) ) : null ); diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 0daa01d7..f6e07103 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -1019,7 +1019,7 @@ const Board = () => { commentCid={thread.cid} className="ttl"/>
Post too long.  @@ -1034,7 +1034,7 @@ const Board = () => { commentCid={thread.cid} className="ttl"/> ) : null} @@ -1337,7 +1337,7 @@ const Board = () => { commentCid={reply.cid} className="ttl"/>
Comment too long.  @@ -1377,7 +1377,7 @@ const Board = () => { commentCid={reply.cid} className="ttl"/> ) : null} @@ -1520,7 +1520,7 @@ const Board = () => { commentCid={thread.cid} className="ttl"/>
Post too long.  @@ -1534,7 +1534,7 @@ const Board = () => { commentCid={thread.cid} className="ttl"/> ) : null} @@ -1682,7 +1682,7 @@ const Board = () => { commentCid={reply.cid} className="ttl"/>
Comment too long.  @@ -1705,7 +1705,7 @@ const Board = () => { commentCid={reply.cid} className="ttl"/> ) : null} diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index 4fc3533c..de9de0bf 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -972,7 +972,7 @@ const Thread = () => { commentCid={comment.cid} className="ttl"/> @@ -1251,7 +1251,7 @@ const Thread = () => { commentCid={reply.cid} className="ttl"/> @@ -1374,7 +1374,7 @@ const Thread = () => { commentCid={comment.cid} className="ttl"/> ) : null} @@ -1499,7 +1499,7 @@ const Thread = () => { commentCid={reply.cid} className="ttl"/> {reply.replyCount > 0 ? (