added skeletons

src/components/views/Board.jsx

@@ -2,8 +2,9 @@ import React, { useState, useEffect, Fragment } from 'react';
 import { Link, useNavigate, useParams, useLocation } from 'react-router-dom';
 import useBoardStore from '../../useBoardStore';
 import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled';
-import ImageBanner from '../ImageBanner';
 import CaptchaModal from '../CaptchaModal';
+import ImageBanner from '../ImageBanner';
+import PostLoader from '../PostLoader';
 import ReplyModal from '../ReplyModal';
 import SettingsModal from '../SettingsModal';
 import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
@@ -554,7 +555,7 @@ const Board = ({ setBodyStyle }) => {
             pageStart={0}
             loadMore={tryLoadMore}
             hasMore={hasMore}
-            loader={<div key="loader">Loading...</div>}
+            loader={<PostLoader key="loader" />}
           >
             {renderedFeed.map(thread => {
             const { replies: { pages: { topAll: { comments } } } } = thread;

src/components/views/Catalog.jsx

@@ -7,6 +7,7 @@ import { Threads } from './styles/Catalog.styled';
 import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import ImageBanner from '../ImageBanner';
 import CaptchaModal from '../CaptchaModal';
+import CatalogLoader from '../CatalogLoader';
 import SettingsModal from '../SettingsModal';
 import onError from '../../utils/onError';
 import onSuccess from '../../utils/onSuccess';
@@ -205,9 +206,6 @@ const Catalog = ({ setBodyStyle }) => {
 
 
 
-  const handleVoidClick = () => {}
-
-
   const handleClickTitle = (title, address) => {
     setSelectedTitle(title);
     setSelectedAddress(address);
@@ -500,7 +498,7 @@ const Catalog = ({ setBodyStyle }) => {
           pageStart={0}
           loadMore={tryLoadMore}
           hasMore={hasMore}
-          loader={<div key={`loader-${feed.length}`}>Loading...</div>}
+          loader={<CatalogLoader key="loader" />}
         >
           {feed.map(thread => {
             return (

src/components/views/Thread.jsx

@@ -4,8 +4,9 @@ import useBoardStore from '../../useBoardStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormTable, BoardForm } from './styles/Board.styled';
 import { ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled';
 import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks';
-import ImageBanner from '../ImageBanner';
 import CaptchaModal from '../CaptchaModal';
+import ImageBanner from '../ImageBanner';
+import PostLoader from '../PostLoader';
 import ReplyModal from '../ReplyModal';
 import SettingsModal from '../SettingsModal';
 import { Tooltip } from 'react-tooltip';
@@ -648,6 +649,7 @@ const Thread = ({ setBodyStyle }) => {
                   </div>
                 </div>
               </div>
+              {comment.replyCount ?? <PostLoader />}
               {comment.replyCount > 0 && 
               Object.keys(comment.replies.pages.topAll.comments).map(() => {
                 const renderedComments = renderThreadComments(comment.replies.pages.topAll.comments);
@@ -806,6 +808,7 @@ const Thread = ({ setBodyStyle }) => {
                     </blockquote>
                   </div>
                 </div>
+                {comment.replyCount ?? <PostLoader />}
                 {comment.replyCount > 0 && 
                 Object.keys(comment.replies.pages.topAll.comments).map(() => {
                   const renderedComments = renderThreadComments(comment.replies.pages.topAll.comments);
@@ -962,7 +965,7 @@ const Thread = ({ setBodyStyle }) => {
             </div>
           </>
          ) : (
-          <div>Loading...</div>
+          <PostLoader />
         )}
       </BoardForm>
     </Container>