show failed label only for failed state

src/components/PendingLabel.jsx

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

src/components/StateLabel.jsx

@@ -17,16 +17,18 @@ const StateLabel = ({ commentIndex, className }) => {
 
   return (
     commentIndex && stateString !== "Succeeded" ? (
-      (comment.state === "failed" || (stateString === undefined && !isLoading && comment.cid === undefined)) ? (
-        <span className="ttl">
-          <br />
-          (
-            <span className="ttl">
-              Failed
-            </span>
-          )
-        </span>
+      (comment.state === "failed") ? (
+        null
       ) : (
+        stateString === undefined && !isLoading && comment.cid === undefined ? (
+          <span className="ttl">
+            <br />
+            (
+              <span className={className}>
+              </span>
+            )
+          </span>
+        ) : (
         <span className="ttl">
           <br />
           (
@@ -35,7 +37,7 @@ const StateLabel = ({ commentIndex, className }) => {
             </span>
           )
         </span>
-      )
+      ))
     ) : null
   );
 };