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: eliminate redundant derived state in board and post views

Browse Source
This commit is contained in:
plebeius
2025-10-16 23:13:18 +02:00
parent d57bf88586
commit b10ada55e7
4 changed files with 48 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/use-comment-media-info.ts
+44 -30
View File
@@ -1,42 +1,56 @@
import { useCallback, useEffect } from 'react';
import { useState, useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { getCommentMediaInfo, fetchWebpageThumbnailIfNeeded } from '../lib/utils/media-utils';
import { getCommentMediaInfo, fetchWebpageThumbnailIfNeeded, CommentMediaInfo } from '../lib/utils/media-utils';
import { isPendingPostView, isPostPageView } from '../lib/utils/view-utils';
export const useCommentMediaInfo = (link: string, thumbnailUrl: string, linkWidth: number, linkHeight: number) => {
/**
* Hook to fetch and cache media info with thumbnail dimensions for comments.
* Properly tracks thumbnail dimensions using state so they're available after the image loads.
*/
export const useCommentMediaInfo = (link: string, thumbnailUrl: string, linkWidth: number, linkHeight: number): CommentMediaInfo | undefined => {
const location = useLocation();
const params = useParams();
const isInPostPageView = isPostPageView(location.pathname, params);
const isInPendingPostView = isPendingPostView(location.pathname, params);
// 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(link, thumbnailUrl, linkWidth, linkHeight);
if (commentMediaInfo?.type === 'webpage' && !commentMediaInfo.thumbnail) {
const newMediaInfo = await fetchWebpageThumbnailIfNeeded(commentMediaInfo);
// Fetch the dimensions of the thumbnail
if (newMediaInfo.thumbnail) {
const img = new Image();
img.onload = () => {
commentMediaInfo = {
...newMediaInfo,
thumbnailWidth: img.width,
thumbnailHeight: img.height,
};
};
img.src = newMediaInfo.thumbnail;
}
commentMediaInfo = newMediaInfo;
}
return commentMediaInfo;
}, [link, thumbnailUrl, linkWidth, linkHeight]);
const [thumbnailDimensions, setThumbnailDimensions] = useState<{ width: number; height: number } | null>(null);
// Fetch and cache thumbnail dimensions for webpage media
useEffect(() => {
// don't fetch in feed view, it displaces the posts
if (isInPostPageView && isInPendingPostView) {
fetchThumbnail();
}
}, [fetchThumbnail, isInPostPageView, isInPendingPostView]);
if (!(isInPostPageView || isInPendingPostView)) return;
return getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
const fetchAndCacheThumbnail = async () => {
const mediaInfo = getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
if (mediaInfo?.type === 'webpage' && !mediaInfo.thumbnail) {
const newMediaInfo = await fetchWebpageThumbnailIfNeeded(mediaInfo);
if (newMediaInfo.thumbnail) {
const img = new Image();
img.onload = () => {
setThumbnailDimensions({ width: img.width, height: img.height });
};
img.onerror = () => {
// Silently handle failed image loads
};
img.src = newMediaInfo.thumbnail;
}
}
};
fetchAndCacheThumbnail();
}, [link, thumbnailUrl, linkWidth, linkHeight, isInPostPageView, isInPendingPostView]);
const mediaInfo = getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
// Return media info with cached thumbnail dimensions if available
if (thumbnailDimensions && mediaInfo) {
return {
...mediaInfo,
thumbnailWidth: thumbnailDimensions.width,
thumbnailHeight: thumbnailDimensions.height,
};
}
return mediaInfo;
};