fix(loading state): position was bugged on post page and it wouldn't render on state 'failed'

src/views/pending-post/pending-post.tsx

@@ -1,12 +1,14 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useAccountComment } from '@plebbit/plebbit-react-hooks';
+import { useTranslation } from 'react-i18next';
 import styles from './pending-post.module.css';
 import Post from '../../components/post';
 import useStateString from '../../hooks/use-state-string';
 import LoadingEllipsis from '../../components/loading-ellipsis';
 
 const PendingPost = () => {
+  const { t } = useTranslation();
   const { accountCommentIndex } = useParams<{ accountCommentIndex?: string }>();
   const commentIndex = accountCommentIndex ? parseInt(accountCommentIndex) : undefined;
   const post = useAccountComment({ commentIndex });
@@ -21,14 +23,10 @@ const PendingPost = () => {
     }
   }, [post, navigate]);
 
-  const loadingString = stateString && (
-    <div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>
-  );
-
   return (
     <div className={styles.container}>
       <Post post={post} />
-      {loadingString}
+      <div className={styles.stateString}>{stateString && stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : t('failed')}</div>
     </div>
   );
 };

src/views/post-page/post-page.module.css

@@ -40,6 +40,7 @@
 
 .loadingString {
   padding: 5px;
+  position: absolute;
 }
 
 .dropdown {

src/views/post-page/post-page.tsx

@@ -38,7 +38,6 @@ const Post = ({ post }: { post: Comment }) => {
 
   const commentCount = replyCount === 0 ? t('no_comments') : replyCount === 1 ? t('one_comment') : t('all_comments', { count: replyCount });
   const stateString = useStateString(post);
-  const loadingString = stateString && <div className={styles.stateString}>{stateString !== 'failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>;
 
   const lockedState = deleted ? t('deleted') : locked ? t('locked') : removed ? t('removed') : '';
 
@@ -84,7 +83,15 @@ const Post = ({ post }: { post: Comment }) => {
           </div>
         </div>
       )}
-      <span className={styles.loadingString}>{loadingString && loadingString}</span>
+      <span className={styles.loadingString}>
+        {stateString && stateString !== 'Failed' ? (
+          <div className={styles.stateString}>
+            <LoadingEllipsis string={stateString} />
+          </div>
+        ) : (
+          t('failed')
+        )}
+      </span>
     </>
   );
 };
@@ -98,7 +105,6 @@ const PostWithContext = ({ post }: { post: Comment }) => {
   const topParentComment = useComment({ commentCid: topParentCid || '' });
 
   const stateString = useStateString(post);
-  const loadingString = stateString && <div className={styles.stateString}>{stateString !== 'failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>;
 
   return (
     <>
@@ -117,7 +123,13 @@ const PostWithContext = ({ post }: { post: Comment }) => {
             </div>
           </div>
           <div className={styles.spacer} />
-          {loadingString && loadingString}
+          {stateString && stateString !== 'Failed' ? (
+            <div className={styles.stateString}>
+              <LoadingEllipsis string={stateString} />
+            </div>
+          ) : (
+            t('failed')
+          )}
         </div>
         <div className={styles.singleCommentInfobar}>
           <div className={styles.singleCommentInfobarText}>{t('single_comment_notice')}</div>

src/views/settings/address-settings/address-settings.tsx

@@ -155,7 +155,6 @@ const AddressSettings = () => {
           </button>{' '}
           <span className={cryptoState.resolveClass}>{cryptoState.resolveString}</span>
         </div>
-        <div></div>
       </div>
     </div>
   );

src/views/settings/plebbit-options/plebbit-options.tsx

@@ -73,7 +73,7 @@ const PlebbitRPCSettings = ({ isElectron }: { isElectron: boolean }) => {
       </div>
       {showInfo && (
         <div className={styles.plebbitRpcSettingsInfo}>
-          use a plebbit full node locally, or remotely via SSL
+          use a plebbit full node locally, or remotely with SSL
           <br />
           <ol>
             <li>get secret auth key from the node</li>