add accurate loading states in all views

src/components/views/Pending.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
@@ -35,6 +35,7 @@ const Pending = () => {
 
   const account = useAccount();
   const comment = useAccountComment({commentIndex: index});
+  const { publishingState } = useAccountComment({commentIndex: index});
   
   const [visible] = useState(true);
   const [errorMessage] = useState(null);
@@ -169,7 +170,7 @@ const Pending = () => {
             <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
             ]
           </span>
-            <span className="reply-stat">{formatState(comment.state)}</span>
+            <span className="reply-stat">{formatState(publishingState)}</span>
           <hr />
         </TopBar>
         <Tooltip id="tooltip" className="tooltip" />