add PendingLabel component

src/components/PendingLabel.jsx

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from "react";
+import { useAccountComment } from "@plebbit/plebbit-react-hooks";
+import useStateString from "../hooks/useStateString";
+
+const PendingLabel = ({ commentIndex }) => {
+  const comment = useAccountComment({commentIndex: commentIndex});
+  const stateString = useStateString(comment);
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsLoading(false), 2000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (commentIndex === undefined) return null;
+
+  return (
+    commentIndex && stateString !== "Succeeded" ? (
+      (comment.state === "failed" || (stateString === undefined && !isLoading)) ? (
+        <span style={{color: 'red', fontWeight: '700'}}>
+          Failed
+        </span>
+      ) : (
+        <span style={{color: 'red', fontWeight: '700'}}>
+          Pending
+        </span>
+      )
+    ) : null
+  );
+};
+
+export default PendingLabel;

src/components/views/All.jsx

@@ -17,6 +17,7 @@ import EditLabel from '../EditLabel';
 import ImageBanner from '../ImageBanner';
 import ModerationModal from '../modals/ModerationModal';
 import OfflineIndicator from '../OfflineIndicator';
+import PendingLabel from '../PendingLabel';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
 import PostOnHover from '../PostOnHover';
@@ -951,7 +952,7 @@ const All = () => {
                                     setSelectedAddress(thread.subplebbitAddress);
                                   }} title="Reply to this post">{reply.shortCid}</Link>
                                 ) : (
-                                  <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
+                                  <PendingLabel key="pending" commentIndex={reply.index} />
                                 )}
                                 &nbsp;p/
                                 <Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board">
@@ -1557,7 +1558,7 @@ const All = () => {
                                   }} title="Reply to this post">{reply.shortCid}
                                 </Link>
                               ) : (
-                                <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span> 
+                                <PendingLabel key="pending-mob" commentIndex={reply.index} />
                               )}
                             </span>
                           </div>

src/components/views/Board.jsx

@@ -17,6 +17,7 @@ import EditLabel from '../EditLabel';
 import ImageBanner from '../ImageBanner';
 import ModerationModal from '../modals/ModerationModal';
 import OfflineIndicator from '../OfflineIndicator';
+import PendingLabel from '../PendingLabel';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
 import PostOnHover from '../PostOnHover';
@@ -1134,7 +1135,7 @@ const Board = () => {
                                     setSelectedParentCid(reply.cid);
                                   }} title="Reply to this post">{reply.shortCid}</Link>
                                 ) : (
-                                  <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
+                                  <PendingLabel key="pending" commentIndex={reply.index} />
                                 )}
                               </span>&nbsp;
                               <PostMenu 
@@ -1689,7 +1690,7 @@ const Board = () => {
                                   }} title="Reply to this post">{reply.shortCid}
                                 </Link>
                               ) : (
-                                <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span> 
+                                <PendingLabel key="pending-mob" commentIndex={reply.index} />
                               )}
                             </span>
                           </div>

src/components/views/Subscriptions.jsx

@@ -17,6 +17,7 @@ import EditLabel from '../EditLabel';
 import ImageBanner from '../ImageBanner';
 import ModerationModal from '../modals/ModerationModal';
 import OfflineIndicator from '../OfflineIndicator';
+import PendingLabel from '../PendingLabel';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
 import PostOnHover from '../PostOnHover';
@@ -962,8 +963,8 @@ const Subscriptions = () => {
                                     setSelectedAddress(thread.subplebbitAddress);
                                   }} title="Reply to this post">{reply.shortCid}</Link>
                                 ) : (
-                                  <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
+                                  <PendingLabel key="pending" commentIndex={reply.index} />
-                                )}
+                                  )}
                                 &nbsp;p/
                                 <Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board">
                                 {thread.subplebbitAddress.includes(".eth") ? 
@@ -1568,7 +1569,7 @@ const Subscriptions = () => {
                                   }} title="Reply to this post">{reply.shortCid}
                                 </Link>
                               ) : (
-                                <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span> 
+                                <PendingLabel key="pending-mob" commentIndex={reply.index} />
                               )}
                             </span>
                           </div>

src/components/views/Thread.jsx

@@ -16,6 +16,7 @@ import EditLabel from '../EditLabel';
 import ImageBanner from '../ImageBanner';
 import ModerationModal from '../modals/ModerationModal';
 import OfflineIndicator from '../OfflineIndicator';
+import PendingLabel from '../PendingLabel';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
 import PostOnHover from '../PostOnHover';
@@ -1051,7 +1052,7 @@ const Thread = () => {
                                   setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid);
                                   }} title="Reply to this post">{reply.shortCid}</button>
                               ) : (
-                                <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
+                                <PendingLabel key="pending" commentIndex={reply.index} />
                               )}
                             </span>&nbsp;
                             <PostMenu 
@@ -1490,7 +1491,7 @@ const Thread = () => {
                                 setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid);
                                 }} title="Reply to this post">{reply.shortCid}</button>
                             ) : (
-                              <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span> 
+                              <PendingLabel key="pending-mob" commentIndex={reply.index} />
                             )}
                           </span>
                         </div>