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(feeds): defer useReplies, Virtuoso for all paths, CLS fixes, memo

Browse Source 
Defer useReplies to hover-only in CatalogPost. Memo CatalogRow and Post. Remove useWindowWidth and autoUpdate from CatalogPost. Replace display:none with opacity for images. Add width/height to img tags in catalog-row and comment-media. Use Virtuoso for all rendering paths (infinite, finite, pagination). Optimize filteredComments with Set lookup. Add Vite manual chunks for markdown, virtuoso, floating-ui.
This commit is contained in:
plebeius
2026-02-23 18:51:42 +08:00
parent 34fdae1e97
commit 91667966f8
6 changed files with 153 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/comment-media/comment-media.tsx
+26 -6
View File
@@ -29,6 +29,8 @@ interface MediaProps {
const Thumbnail = ({ commentMediaInfo, deleted, displayHeight, displayWidth, isFloatingEmbed, isOutOfFeed, isReply, removed, spoiler, setShowThumbnail }: MediaProps) => {
const isMobile = useIsMobile();
const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
const numericWidth = parseInt(displayWidth || '') || undefined;
const numericHeight = parseInt(displayHeight || '') || undefined;
let thumbnailComponent: React.ReactNode = null;
const iframeThumbnail = patternThumbnailUrl || thumbnail;
@@ -36,18 +38,20 @@ const Thumbnail = ({ commentMediaInfo, deleted, displayHeight, displayWidth, isF
const hasThumbnail = getHasThumbnail(commentMediaInfo, url);
if (type === 'gif') {
thumbnailComponent = <img src={gifFrameUrl || url} alt='' onClick={() => setShowThumbnail(false)} />;
thumbnailComponent = <img src={gifFrameUrl || url} alt='' onClick={() => setShowThumbnail(false)} width={numericWidth} height={numericHeight} />;
} else if (type === 'video') {
thumbnailComponent = thumbnail ? (
<img src={thumbnail} alt='' />
<img src={thumbnail} alt='' width={numericWidth} height={numericHeight} />
) : (
// show first frame of the video, as a workaround for Safari not loading thumbnails
<video src={`${url}#t=0.001`} onClick={() => setShowThumbnail(false)} />
);
} else if (type === 'webpage') {
thumbnailComponent = <img src={thumbnail} alt='' onClick={() => setShowThumbnail(false)} />;
thumbnailComponent = <img src={thumbnail} alt='' onClick={() => setShowThumbnail(false)} width={numericWidth} height={numericHeight} />;
} else if (type === 'iframe') {
thumbnailComponent = iframeThumbnail ? <img src={iframeThumbnail} alt='' onClick={() => setShowThumbnail(false)} /> : null;
thumbnailComponent = iframeThumbnail ? (
<img src={iframeThumbnail} alt='' onClick={() => setShowThumbnail(false)} width={numericWidth} height={numericHeight} />
) : null;
} else if (type === 'audio') {
thumbnailComponent = <audio src={url} controls />;
}
@@ -140,6 +144,8 @@ const Image = ({ commentMediaInfo, disableToggle = false, displayHeight, display
const { t } = useTranslation();
const { type, url } = commentMediaInfo || {};
const isReply = parentCid;
const numericWidth = parseInt(displayWidth || '') || undefined;
const numericHeight = parseInt(displayHeight || '') || undefined;
const isMobile = useIsMobile();
const [isImageExpanded, setIsImageExpanded] = useState(initialExpanded);
const { fitExpandedImagesToScreen } = useExpandedMediaStore();
@@ -174,7 +180,14 @@ const Image = ({ commentMediaInfo, disableToggle = false, displayHeight, display
{hasError ? (
<img src='assets/filedeleted-res.gif' alt='File deleted' />
) : (
<img src={url} onError={handleError} alt='' onClick={disableToggle ? undefined : () => setIsImageExpanded(!isImageExpanded)} />
<img
src={url}
onError={handleError}
alt=''
onClick={disableToggle ? undefined : () => setIsImageExpanded(!isImageExpanded)}
width={numericWidth}
height={numericHeight}
/>
)}
</span>
{isImageExpanded && type && (
@@ -196,7 +209,14 @@ const Image = ({ commentMediaInfo, disableToggle = false, displayHeight, display
{hasError ? (
<img src='assets/filedeleted-res.gif' alt='File deleted' />
) : (
<img src={url} onError={handleError} alt='' onClick={disableToggle ? undefined : () => setIsImageExpanded(!isImageExpanded)} />
<img
src={url}
onError={handleError}
alt=''
onClick={disableToggle ? undefined : () => setIsImageExpanded(!isImageExpanded)}
width={numericWidth}
height={numericHeight}
/>
)}
</span>
);