External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

added skeletons

Browse Source
This commit is contained in:
plebbitor
2023-03-19 18:30:07 +01:00
parent 37e413b281
commit 1885a105e4
5 changed files with 105 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CatalogLoader.jsx
+51
View File
@@ -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;
src/components/PostLoader.jsx
+44
View File
@@ -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;
src/components/views/Board.jsx
+3 -2
View File
@@ -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
+2 -4
View File
@@ -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
+5 -2
View File
@@ -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>