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

refactor(home): prevent layout shift in popular threads loading

Browse Source 
Remove boards list loading state since default data is available synchronously. Add min-height to popular threads loading state to reserve space and prevent container resize. Left-align loading text in popular threads.
This commit is contained in:
plebeius
2025-12-06 16:39:22 +01:00
parent 1b22711776
commit c1a66ca61e
3 changed files with 17 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/home/popular-threads-box/popular-threads-box.tsx
+3 -6
View File
@@ -78,6 +78,7 @@ const PopularThreadsBox = ({ multisub, subplebbits }: { multisub: MultisubSubple
const filteredSubplebbits = useMemo(getFilteredSubplebbits, [subplebbits, showWorksafeContentOnly, showNsfwContentOnly, multisub]);
const { popularPosts } = usePopularPosts(filteredSubplebbits);
const isLoading = popularPosts.length === 0;
return (
<div className={styles.box}>
@@ -85,12 +86,8 @@ const PopularThreadsBox = ({ multisub, subplebbits }: { multisub: MultisubSubple
<h2 className='capitalize'>{t('popular_threads')}</h2>
<BoxModal />
</div>
<div className={`${styles.boxContent} ${popularPosts.length !== 0 ? styles.popularThreads : ''}`}>
{popularPosts.length === 0 ? (
<LoadingEllipsis string={t('loading')} />
) : (
popularPosts.map((post: any) => <PopularThreadCard key={post.cid} post={post} multisub={multisub} />)
)}
<div className={`${styles.boxContent} ${styles.popularThreads} ${isLoading ? styles.popularThreadsLoading : ''}`}>
{isLoading ? <LoadingEllipsis string={t('loading')} /> : popularPosts.map((post: any) => <PopularThreadCard key={post.cid} post={post} multisub={multisub} />)}
</div>
</div>
);