fix: errors could be displayed unnecessarily

src/views/board/board.tsx

@@ -13,6 +13,7 @@ import useTimeFilter from '../../hooks/use-time-filter';
 import useInterfaceSettingsStore from '../../stores/use-interface-settings-store';
 import useFeedResetStore from '../../stores/use-feed-reset-store';
 import useSortingStore from '../../stores/use-sorting-store';
+import ErrorDisplay from '../../components/error-display/error-display';
 import LoadingEllipsis from '../../components/loading-ellipsis';
 import SubplebbitDescription from '../../components/subplebbit-description';
 import SubplebbitRules from '../../components/subplebbit-rules';
@@ -227,12 +228,6 @@ const Board = () => {
           ) : (
             hasMore && <LoadingEllipsis string={loadingStateString} />
           )}
-          {error && (
-            <div className='red'>
-              <br />
-              {error.message}
-            </div>
-          )}
           {blocked && (
             <>
               &nbsp;&nbsp;[
@@ -274,6 +269,16 @@ const Board = () => {
     document.title = boardTitle + ' - plebchan';
   }, [title, shortAddress, subplebbitAddress]);
 
+  // probably not necessary to show the error to the user if the feed loaded successfully
+  const [shouldShowErrorToUser, setShouldShowErrorToUser] = useState(false);
+  useEffect(() => {
+    if (error?.message && feed.length === 0) {
+      setShouldShowErrorToUser(true);
+    } else if (feed.length > 0) {
+      setShouldShowErrorToUser(false);
+    }
+  }, [error, feed]);
+
   return (
     <>
       {shouldShowSnow() && <hr />}
@@ -289,6 +294,11 @@ const Board = () => {
             title={title}
           />
         )}
+        {shouldShowErrorToUser && (
+          <div className={styles.error}>
+            <ErrorDisplay error={error} />
+          </div>
+        )}
         {rules && !description && rules.length > 0 && <SubplebbitRules subplebbitAddress={subplebbitAddress} createdAt={createdAt} rules={rules} />}
         <Virtuoso
           increaseViewportBy={{ bottom: 1200, top: 1200 }}

src/views/post/post.tsx

@@ -1,10 +1,11 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Comment, Role, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
 import { useLocation, useParams } from 'react-router-dom';
 import { isAllView, isDescriptionView, isRulesView } from '../../lib/utils/view-utils';
 import useIsMobile from '../../hooks/use-is-mobile';
+import ErrorDisplay from '../../components/error-display/error-display';
 import PostDesktop from '../../components/post-desktop';
 import PostMobile from '../../components/post-mobile';
 import SubplebbitDescription from '../../components/subplebbit-description';
@@ -83,11 +84,25 @@ const PostPage = () => {
     document.title = isInAllView ? `${t('all')} - plebchan` : postDucumentTitle;
   }, [title, shortAddress, subplebbitAddress, post?.title, post?.content, isInAllView, t]);
 
+  // probably not necessary to show the error to the user if the post loaded successfully
+  const [shouldShowErrorToUser, setShouldShowErrorToUser] = useState(false);
+  useEffect(() => {
+    if (post?.error && ((post?.replyCount > 0 && post?.replies?.length === 0) || (post?.state === 'failed' && post?.error))) {
+      setShouldShowErrorToUser(true);
+    } else if (post?.replyCount > 0 && post?.replies?.length > 0) {
+      setShouldShowErrorToUser(false);
+    }
+  }, [post]);
+
   return (
     <div className={styles.content}>
       {/* TODO: remove this replyCount error once api supports scrolling replies pages */}
       {replyCount > 60 && <span className={styles.error}>Error: this thread has too many replies, some of them cannot be displayed right now.</span>}
-      {error && <span className={styles.error}>Error: {error?.message || error?.toString?.()}</span>}
+      {shouldShowErrorToUser && (
+        <div className={styles.error}>
+          <ErrorDisplay error={error} />
+        </div>
+      )}
       {isInDescriptionView ? (
         <SubplebbitDescription
           avatarUrl={suggested?.avatarUrl}