From 1885a105e4b35384a47ee603648637e63dfe71c0 Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Sun, 19 Mar 2023 18:30:07 +0100
Subject: [PATCH] added skeletons

---
 src/components/CatalogLoader.jsx | 51 ++++++++++++++++++++++++++++++++
 src/components/PostLoader.jsx    | 44 +++++++++++++++++++++++++++
 src/components/views/Board.jsx   |  5 ++--
 src/components/views/Catalog.jsx |  6 ++--
 src/components/views/Thread.jsx  |  7 +++--
 5 files changed, 105 insertions(+), 8 deletions(-)
 create mode 100644 src/components/CatalogLoader.jsx
 create mode 100644 src/components/PostLoader.jsx

diff --git a/src/components/CatalogLoader.jsx b/src/components/CatalogLoader.jsx
new file mode 100644
index 00000000..f302866a
--- /dev/null
+++ b/src/components/CatalogLoader.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import useBoardStore from '../useBoardStore';
+
+
+const SingleRectLoader = () => {
+  const selectedStyle = useBoardStore((state) => state.selectedStyle);
+  const backgroundColor = selectedStyle === 'Tomorrow' ? '#333' : '#f3f3f3';
+  const foregroundColor = selectedStyle === 'Tomorrow' ? '#555' : '#ecebeb';
+  
+  return (
+    <ContentLoader
+      speed={2}
+      width={150}
+      height={215}
+      viewBox="0 0 150 215"
+      backgroundColor={backgroundColor}
+      foregroundColor={foregroundColor}
+      style={{
+        width: '150px',
+        height: '215px',
+        marginRight: '30px',
+        marginBottom: '30px',
+      }}
+    >
+      <rect x={0} y={0} width="150" height="150" />
+      <rect x={0} y={170} width="150" height="18" />
+      <rect x={0} y={195} width="80" height="20" />
+    </ContentLoader>
+  );
+};
+
+
+const CatalogLoader = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        boxSizing: 'border-box',
+      }}
+    >
+      {[...Array(24)].map((_, index) => (
+        <SingleRectLoader key={index} />
+      ))}
+    </div>
+  );
+};
+
+export default CatalogLoader;
diff --git a/src/components/PostLoader.jsx b/src/components/PostLoader.jsx
new file mode 100644
index 00000000..1980b19c
--- /dev/null
+++ b/src/components/PostLoader.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import useBoardStore from '../useBoardStore';
+
+const SinglePostLoader = () => {
+  const selectedStyle = useBoardStore((state) => state.selectedStyle);
+  const backgroundColor = selectedStyle === 'Tomorrow' ? '#333' : '#f3f3f3';
+  const foregroundColor = selectedStyle === 'Tomorrow' ? '#555' : '#ecebeb';
+
+  return (
+    <div style={{ paddingLeft: '30px', paddingRight: '30px', marginBottom: '50px', marginTop: '30px' }}>
+      <ContentLoader
+        width="100%"
+        height={15 * 3 + 30}
+        backgroundColor={backgroundColor}
+        foregroundColor={foregroundColor}
+      >
+        <rect x="0" y="8" width="100%" height="15" />
+        <rect x="0" y="30" width="100%" height="15" />
+        <rect x="0" y="52" width="100%" height="15" />
+      </ContentLoader>
+    </div>
+  );
+};
+
+const PostLoader = () => {
+  return (
+    <div
+      style={{
+        display: 'block',
+        boxSizing: 'border-box',
+        paddingLeft: '30px',
+        paddingRight: '30px',
+        marginBottom: '30px',
+      }}
+    >
+      {[...Array(5)].map((_, index) => (
+        <SinglePostLoader key={index} />
+      ))}
+    </div>
+  );
+};
+
+export default PostLoader;
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 40294896..1373042b 100644
--- a/src/components/views/Board.jsx
+++ b/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;
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index f0bd33cf..8c602ab6 100644
--- a/src/components/views/Catalog.jsx
+++ b/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 (
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index 0f3c617b..9304096f 100644
--- a/src/components/views/Thread.jsx
+++ b/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>