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

perf(app): optimize subs loading as much as possible

Browse Source
This commit is contained in:
plebeius.eth
2024-03-27 15:10:58 +01:00
parent 38b3793dc9
commit 311896d122
7 changed files with 163 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post/post.module.css
+18 -2
View File
@@ -2,11 +2,11 @@
clear: both;
}
.hrWrapper hr {
.postDesktop .hrWrapper hr {
margin: 0; /* margin bugs Virtuoso scrolling */
}
.hrWrapper {
.postDesktop .hrWrapper {
padding-top: 0.5em; /* instead of using margin, wrap with padding */
padding-bottom: 0.5em;
}
@@ -89,8 +89,24 @@
padding: 1em 40px;
}
.postMobile hr {
padding-bottom: 30px;
}
.postMobile .thread {
border-top: none;
margin: 0;
clear: both;
}
@media (max-width: 640px) {
.postDesktop {
display: none;
}
}
@media (min-width: 641px) {
.postMobile {
display: none;
}
}
src/components/post/post.tsx
+73 -52
View File
@@ -7,7 +7,7 @@ import { getLinkMediaInfoMemoized } from '../../lib/utils/media-utils';
import { getFormattedDate } from '../../lib/utils/time-utils';
import Markdown from '../markdown';
const Post = ({ post }: Comment) => {
const PostDesktop = ({ post }: Comment) => {
const { t } = useTranslation();
const { author, cid, content, link, locked, pinned, postCid, shortCid, subplebbitAddress, timestamp, title } = post || {};
const { displayName, shortAddress } = author || {};
@@ -15,64 +15,85 @@ const Post = ({ post }: Comment) => {
const linkMediaInfo = getLinkMediaInfoMemoized(link);
return (
<div className={styles.thread}>
<div className={styles.postContainer}>
<div className={styles.postDesktop}>
<div className={styles.hrWrapper}>
<hr />
</div>
{linkMediaInfo?.url && (
<div className={styles.link}>
{t('link')}:{' '}
<a href={linkMediaInfo?.url} target='_blank' rel='noopener noreferrer'>
{linkMediaInfo.url.length > 30 ? linkMediaInfo?.url.slice(0, 30) + '...' : linkMediaInfo?.url}
</a>{' '}
({linkMediaInfo?.type})
</div>
)}
<div className={styles.postInfo}>
{title && <span className={styles.subject}>{title.length > 75 ? title.slice(0, 75) + '...' : title}</span>}{' '}
<span className={styles.nameBlock}>
<span className={styles.name}>{displayName || 'Anonymous'} </span>
<span className={styles.userAddress}>(u/{shortAddress}) </span>
<div className={styles.postDesktop}>
<div className={styles.hrWrapper}>
<hr />
</div>
{linkMediaInfo?.url && (
<div className={styles.link}>
{t('link')}:{' '}
<a href={linkMediaInfo?.url} target='_blank' rel='noopener noreferrer'>
{linkMediaInfo.url.length > 30 ? linkMediaInfo?.url.slice(0, 30) + '...' : linkMediaInfo?.url}
</a>{' '}
({linkMediaInfo?.type})
</div>
)}
<div className={styles.postInfo}>
{title && <span className={styles.subject}>{title.length > 75 ? title.slice(0, 75) + '...' : title}</span>}{' '}
<span className={styles.nameBlock}>
<span className={styles.name}>{displayName || 'Anonymous'} </span>
<span className={styles.userAddress}>(u/{shortAddress}) </span>
</span>
<span className={styles.dateTime}>{getFormattedDate(timestamp)} </span>
<span className={styles.postNum}>
<span className={styles.postNumLink}>
<Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')}>
c/
</Link>
<span className={styles.replyToPost} title={t('reply_to_post')}>
{shortCid}
</span>
<span className={styles.dateTime}>{getFormattedDate(timestamp)} </span>
<span className={styles.postNum}>
<span className={styles.postNumLink}>
<Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')}>
c/
</Link>
<span className={styles.replyToPost} title={t('reply_to_post')}>
{shortCid}
</span>
</span>
{pinned && (
<span className={styles.stickyIconWrapper}>
<img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
</span>
)}
{locked && (
<span className={styles.closedIconWrapper}>
<img src='assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
</span>
)}
<span className={styles.replyButton}>
[<Link to={`/p/${subplebbitAddress}/c/${postCid}`}>{t('reply')}</Link>]
</span>
</span>
{pinned && (
<span className={styles.stickyIconWrapper}>
<img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
</span>
<span className={styles.postMenuBtn}>▶</span>
</div>
{content && (
<div className={styles.postMessage}>
<blockquote>
<Markdown content={content} />
</blockquote>
</div>
)}
{locked && (
<span className={styles.closedIconWrapper}>
<img src='assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
</span>
)}
<span className={styles.replyButton}>
[<Link to={`/p/${subplebbitAddress}/c/${postCid}`}>{t('reply')}</Link>]
</span>
</span>
<span className={styles.postMenuBtn}>▶</span>
</div>
{content && (
<div className={styles.postMessage}>
<blockquote>
<Markdown content={content} />
</blockquote>
</div>
)}
</div>
);
};
const PostMobile = ({ post }: Comment) => {
return (
<div className={styles.postMobile}>
<hr />
<div className={styles.thread}>
<div className={styles.postContainer}>
<div className={styles.postOp}></div>
<div className={styles.postLinkMobile}></div>
</div>
</div>
</div>
);
};
const Post = ({ post }: Comment) => {
return (
<div className={styles.thread}>
<div className={styles.postContainer}>
<PostDesktop post={post} />
<PostMobile post={post} />
</div>
</div>
);
};
export default Post;