display state strings from backend, but with user friendly wording

src/components/post-desktop/post-desktop.tsx

@@ -447,7 +447,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
   const linksCount = pinned ? totalLinksCount : totalLinksCount - visiblelinksCount;
   const { showOmittedReplies, setShowOmittedReplies } = useShowOmittedReplies();
 
-  const stateString = useStateString(post);
+  const stateString = useStateString(post) || t('loading_board');
 
   const subplebbit = useSubplebbit({ subplebbitAddress });
 
@@ -522,6 +522,8 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
         )}
       </div>
       {!isInPendingPostView &&
+        !isDescription &&
+        !isRules &&
         (stateString && stateString !== 'Failed' && state !== 'succeeded' ? (
           <div className={styles.stateString}>
             <br />

src/components/post-mobile/post-mobile.tsx

@@ -374,7 +374,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
   const isInPostPageView = isPostPageView(location.pathname, params);
   const { hidden, unhide } = useHide({ cid });
 
-  const stateString = useStateString(post);
+  const stateString = useStateString(post) || t('loading_post');
 
   const subplebbit = useSubplebbit({ subplebbitAddress });
   const showRules = isDescription && subplebbit?.rules && subplebbit?.rules.length > 0;
@@ -448,6 +448,8 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
             )}
           </div>
           {!isInPendingPostView &&
+            !isDescription &&
+            !isRules &&
             (stateString && stateString !== 'Failed' && state !== 'succeeded' ? (
               <div className={styles.stateString}>
                 <LoadingEllipsis string={stateString} />

src/hooks/use-feed-state-string.ts

@@ -35,7 +35,7 @@ const useFeedStateString = (subplebbitAddresses?: string[]): string | undefined
     if (states['resolving-address']) {
       const { subplebbitAddresses, clientUrls } = states['resolving-address'];
       if (subplebbitAddresses.length && clientUrls.length) {
-        stateString += `resolving ${subplebbitAddresses.length} ${subplebbitAddresses.length === 1 ? 'address' : 'addresses'} from ${clientUrls
+        stateString += `loading ${subplebbitAddresses.length} ${subplebbitAddresses.length === 1 ? 'address' : 'addresses'} from ${clientUrls
           .map(getClientHost)
           .join(', ')}`;
       }
@@ -63,15 +63,15 @@ const useFeedStateString = (subplebbitAddresses?: string[]): string | undefined
       states['fetching-ipfs']?.clientUrls.forEach((clientUrl) => clientHosts.add(getClientHost(clientUrl)));
 
       if (clientHosts.size) {
-        stateString += 'fetching ';
+        stateString += 'loading ';
         if (states['fetching-ipns']) {
-          stateString += `${states['fetching-ipns'].subplebbitAddresses.length} IPNS`;
+          stateString += `${states['fetching-ipns'].subplebbitAddresses.length} boards`;
         }
         if (states['fetching-ipfs']) {
           if (states['fetching-ipns']) {
             stateString += ', ';
           }
-          stateString += `${states['fetching-ipfs'].subplebbitAddresses.length} IPFS`;
+          stateString += `${states['fetching-ipfs'].subplebbitAddresses.length} posts`;
         }
         if (pagesStatesSubplebbitAddresses.size) {
           if (states['fetching-ipns'] || states['fetching-ipfs']) {

src/hooks/use-is-subplebbit-offline.ts

@@ -34,7 +34,7 @@ const useIsSubplebbitOffline = (subplebbit: Subplebbit) => {
   const offlineIconClass = isLoading ? 'yellowOfflineIcon' : isOffline ? 'redOfflineIcon' : '';
 
   const offlineTitle = isLoading
-    ? t('loading_subplebbit')
+    ? t('loading_board')
     : updatedAt
     ? isOffline && t('posts_last_synced_info', { time: getFormattedTimeAgo(updatedAt), interpolation: { escapeValue: false } })
     : t('subplebbit_offline_info');

src/hooks/use-state-string.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { useClientsStates } from '@plebbit/plebbit-react-hooks';
+import { debounce } from 'lodash';
 
 interface CommentOrSubplebbit {
   state?: string;
@@ -25,13 +26,19 @@ const getClientHost = (clientUrl: string): string => {
 };
 
 const useStateString = (commentOrSubplebbit: CommentOrSubplebbit): string | undefined => {
-  const { states } = useClientsStates({ comment: commentOrSubplebbit }) as { states: States };
+  const { states: rawStates } = useClientsStates({ comment: commentOrSubplebbit }) as { states: States };
+
+  const debouncedStates = useMemo(() => {
+    const debouncedValue = debounce((value: States) => value, 300);
+    return debouncedValue(rawStates);
+  }, [rawStates]);
+
   return useMemo(() => {
     let stateString: string | undefined = '';
 
-    for (const state in states) {
-      const clientUrls = states[state];
-      const clientHosts = clientUrls.map((clientUrl) => getClientHost(clientUrl));
+    for (const state in debouncedStates) {
+      const clientUrls = debouncedStates[state];
+      const clientHosts = clientUrls.map((clientUrl: string) => getClientHost(clientUrl));
 
       if (clientHosts.length === 0) {
         continue;
@@ -49,10 +56,17 @@ const useStateString = (commentOrSubplebbit: CommentOrSubplebbit): string | unde
       if (commentOrSubplebbit?.publishingState && commentOrSubplebbit?.publishingState !== 'stopped' && commentOrSubplebbit?.publishingState !== 'succeeded') {
         stateString = commentOrSubplebbit.publishingState;
       } else if (commentOrSubplebbit?.updatingState !== 'stopped' && commentOrSubplebbit?.updatingState !== 'succeeded') {
-        stateString = commentOrSubplebbit?.updatingState;
+        stateString = commentOrSubplebbit.updatingState;
       }
       if (stateString) {
-        stateString = stateString.replaceAll('-', ' ').replace('ipfs', 'IPFS').replace('ipns', 'IPNS');
+        stateString = stateString
+          .replaceAll('-', ' ')
+          .replace('ipfs', 'post')
+          .replace('ipns', 'subplebbit')
+          .replace('fetching', 'loading')
+          .replace('resolving', 'loading')
+          .replace('subplebbit subplebbit', 'board')
+          .replace('loading subplebbit', 'loading board');
       }
     }
 
@@ -61,7 +75,7 @@ const useStateString = (commentOrSubplebbit: CommentOrSubplebbit): string | unde
     }
 
     return stateString === '' ? undefined : stateString;
-  }, [states, commentOrSubplebbit]);
+  }, [debouncedStates, commentOrSubplebbit]);
 };
 
 export default useStateString;

src/views/board/board.tsx

@@ -121,7 +121,7 @@ const Board = () => {
   const { activeCid, threadCid, closeModal, openReplyModal, showReplyModal, scrollY, subplebbitAddress: postSubplebbitAddress } = useReplyModal();
 
   const { blocked, unblock } = useBlock({ address: subplebbitAddress });
-  const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
+  const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading_board');
 
   const handleNewerPostsButtonClick = () => {
     window.scrollTo({ top: 0, left: 0 });

src/views/post/post.module.css

@@ -221,6 +221,7 @@
 
 .stateString {
   color: var(--post-mobile-abbr-text-color);
+  padding-left: 20px;
 }
 
 .loadingString {