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(feed): optimize posts rendering via props refactoring, memoizations

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2025-03-03 23:47:33 +01:00
parent 4bdcfbdd28
commit 797a1f23c6
14 changed files with 206 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/use-catalog-feed-rows.ts
+2 -2
View File
@@ -33,8 +33,8 @@ const useCatalogFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolea
// show account comments instantly in the feed once published (cid defined), instead of waiting for the feed to update
const filteredComments = accountComments.filter((comment) => {
const { cid, deleted, link, postCid, removed, state, subplebbitAddress, timestamp } = comment || {};
const commentMediaInfo = getCommentMediaInfo(comment);
const { cid, deleted, link, postCid, removed, state, subplebbitAddress, timestamp, thumbnailUrl, linkWidth, linkHeight } = comment || {};
const commentMediaInfo = getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
const isMediaShowed = getHasThumbnail(commentMediaInfo, link);
return (
src/hooks/use-comment-media-info.ts
+4 -5
View File
@@ -1,10 +1,9 @@
import { useCallback, useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { Comment } from '@plebbit/plebbit-react-hooks';
import { getCommentMediaInfo, fetchWebpageThumbnailIfNeeded } from '../lib/utils/media-utils';
import { isPendingPostView, isPostPageView } from '../lib/utils/view-utils';
export const useCommentMediaInfo = (comment: Comment) => {
export const useCommentMediaInfo = (link: string, thumbnailUrl: string, linkWidth: number, linkHeight: number) => {
const location = useLocation();
const params = useParams();
const isInPostPageView = isPostPageView(location.pathname, params);
@@ -12,7 +11,7 @@ export const useCommentMediaInfo = (comment: Comment) => {
// some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
const fetchThumbnail = useCallback(async () => {
let commentMediaInfo = getCommentMediaInfo(comment);
let commentMediaInfo = getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
if (commentMediaInfo?.type === 'webpage' && !commentMediaInfo.thumbnail) {
const newMediaInfo = await fetchWebpageThumbnailIfNeeded(commentMediaInfo);
// Fetch the dimensions of the thumbnail
@@ -30,7 +29,7 @@ export const useCommentMediaInfo = (comment: Comment) => {
commentMediaInfo = newMediaInfo;
}
return commentMediaInfo;
}, [comment]);
}, [link, thumbnailUrl, linkWidth, linkHeight]);
useEffect(() => {
// don't fetch in feed view, it displaces the posts
@@ -39,5 +38,5 @@ export const useCommentMediaInfo = (comment: Comment) => {
}
}, [fetchThumbnail, isInPostPageView, isInPendingPostView]);
return getCommentMediaInfo(comment);
return getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
};
src/hooks/use-popular-posts.ts
+2 -2
View File
@@ -22,10 +22,10 @@ const usePopularPosts = (subplebbits: Subplebbit[]) => {
if (subplebbit?.posts?.pages?.hot?.comments) {
for (const post of Object.values(subplebbit.posts.pages.hot.comments as Comment)) {
const { deleted, link, locked, pinned, removed, replyCount, timestamp } = post;
const { deleted, link, linkHeight, linkWidth, locked, pinned, removed, replyCount, thumbnailUrl, timestamp } = post;
try {
const commentMediaInfo = getCommentMediaInfo(post);
const commentMediaInfo = getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
if (