add missing loading states

src/views/board/board.tsx

@@ -7,7 +7,6 @@ import styles from './board.module.css';
 import { shouldShowSnow } from '../../lib/snow';
 import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
 import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
-import { useAutoSubscribe } from '../../hooks/use-auto-subscribe';
 import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 import useFeedStateString from '../../hooks/use-feed-state-string';
 import useReplyModal from '../../hooks/use-reply-modal';
@@ -32,7 +31,6 @@ const threadsWithoutImagesFilter = (comment: Comment) => {
 };
 
 const Board = () => {
-  const { isCheckingSubscriptions } = useAutoSubscribe();
   const { t } = useTranslation();
   const location = useLocation();
   const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
@@ -298,26 +296,18 @@ const Board = () => {
           />
         )}
         {rules && !description && rules.length > 0 && <SubplebbitRules subplebbitAddress={subplebbitAddress} createdAt={createdAt} rules={rules} />}
-        {isCheckingSubscriptions ? (
-          <div className={styles.feed}>
-            <div className={styles.footer}>
-              <LoadingEllipsis string={t('loading_feed')} />
-            </div>
-          </div>
-        ) : (
-          <Virtuoso
-            increaseViewportBy={{ bottom: 1200, top: 1200 }}
-            totalCount={combinedFeed.length}
-            data={combinedFeed}
-            itemContent={(index, post) => <Post index={index} post={post} openReplyModal={openReplyModal} />}
-            useWindowScroll={true}
-            components={{ Footer }}
-            endReached={loadMore}
-            ref={virtuosoRef}
-            restoreStateFrom={lastVirtuosoState}
-            initialScrollTop={lastVirtuosoState?.scrollTop}
-          />
-        )}
+        <Virtuoso
+          increaseViewportBy={{ bottom: 1200, top: 1200 }}
+          totalCount={combinedFeed.length}
+          data={combinedFeed}
+          itemContent={(index, post) => <Post index={index} post={post} openReplyModal={openReplyModal} />}
+          useWindowScroll={true}
+          components={{ Footer }}
+          endReached={loadMore}
+          ref={virtuosoRef}
+          restoreStateFrom={lastVirtuosoState}
+          initialScrollTop={lastVirtuosoState?.scrollTop}
+        />
       </div>
     </>
   );

src/views/home/boards-list/boards-list.tsx

@@ -4,10 +4,12 @@ import { useTranslation } from 'react-i18next';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import { Subplebbit, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
 import { useDefaultSubplebbitTags } from '../../../hooks/use-default-subplebbits-tags';
+import { useDefaultSubplebbitsState } from '../../../hooks/use-default-subplebbits';
 import useIsMobile from '../../../hooks/use-is-mobile';
 import useIsSubplebbitOffline from '../../../hooks/use-is-subplebbit-offline';
 import styles from '../home.module.css';
 import { nsfwTags } from '../home';
+import LoadingEllipsis from '../../../components/loading-ellipsis';
 
 const Board = ({ subplebbit, isMobile }: { subplebbit: Subplebbit; isMobile: boolean }) => {
   const { t } = useTranslation();
@@ -60,6 +62,7 @@ const BoardsList = ({ multisub }: { multisub: Subplebbit[] }) => {
   const location = useLocation();
   const [displayCount, setDisplayCount] = useState(15);
   const isMobile = useIsMobile();
+  const { loading, error } = useDefaultSubplebbitsState();
 
   const currentTag = location.pathname.split('/').filter(Boolean)[0];
   const tags = useDefaultSubplebbitTags(multisub);
@@ -68,6 +71,24 @@ const BoardsList = ({ multisub }: { multisub: Subplebbit[] }) => {
     setDisplayCount(15);
   }, [currentTag]);
 
+  if (loading) {
+    return (
+      <div className={styles.boardsBox}>
+        <span className={styles.loading}>
+          <LoadingEllipsis string={t('loading_default_boards')} />
+        </span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.boardsBox}>
+        <div className='red'>{error.message}</div>
+      </div>
+    );
+  }
+
   const filteredBoards = (currentTag && tags.includes(currentTag) ? multisub.filter((sub) => sub?.tags?.includes(currentTag)) : multisub).slice(0, displayCount);
 
   const totalBoardCount = currentTag && tags.includes(currentTag) ? multisub.filter((sub) => sub?.tags?.includes(currentTag)).length : multisub.length;

src/views/home/home.module.css

@@ -34,6 +34,13 @@
   min-height: 150px;
 }
 
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+}
+
 .offlineIcon {
   display: inline-block;
   vertical-align: text-top;