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

feat(post): add loading state string

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-07-21 12:17:40 +02:00
parent c27cd8aa26
commit 954b158704
3 changed files with 38 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-desktop/post-desktop.tsx
+11 -1
View File
@@ -364,7 +364,7 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies = true }: PostProps) => {
const { t } = useTranslation();
const { author, cid, content, link, pinned, postCid, subplebbitAddress } = post || {};
const { author, cid, content, link, pinned, postCid, state, subplebbitAddress } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
const params = useParams();
const location = useLocation();
@@ -391,6 +391,8 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
}
}, [location.pathname, replies, subplebbitAddress]);
const stateString = useStateString(post);
return (
<div className={styles.postDesktop}>
{showReplies ? (
@@ -450,6 +452,14 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
</div>
))}
</div>
{stateString && stateString !== 'Failed' ? (
<div className={styles.stateString}>
<br />
<LoadingEllipsis string={stateString} />
</div>
) : (
state === 'failed' && <span className={styles.error}>{t('failed')}</span>
)}
</div>
);
};
src/components/post-mobile/post-mobile.tsx
+10 -1
View File
@@ -285,7 +285,7 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies = true }: PostProps) => {
const { t } = useTranslation();
const { author, cid, content, pinned, postCid, replyCount, subplebbitAddress } = post || {};
const { author, cid, content, pinned, postCid, replyCount, state, subplebbitAddress } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
const params = useParams();
const location = useLocation();
@@ -307,6 +307,8 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
}
}, [location.pathname, replies, subplebbitAddress]);
const stateString = useStateString(post);
return (
<>
{hidden && !isInPostPageView ? (
@@ -363,6 +365,13 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
</div>
))}
</div>
{stateString && stateString !== 'Failed' ? (
<div className={styles.stateString}>
<LoadingEllipsis string={stateString} />
</div>
) : (
state === 'failed' && <span className={styles.error}>{t('failed')}</span>
)}
</div>
)}
</>
src/views/post/post.module.css
+17
View File
@@ -514,6 +514,15 @@
vertical-align: top;
}
.stateString {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: calc(100vw - 28px);
width: 100vw;
}
@media (max-width: 640px) {
.replyQuotePreview {
margin-right: 10px;
@@ -535,6 +544,10 @@
.authorAvatar {
vertical-align: middle;
}
.stateString {
padding-left: 5px;
}
}
@media (min-width: 640px) {
@@ -555,4 +568,8 @@
.replyMobile {
display: none;
}
.stateString {
padding-top: 10px;
}
}