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/catalog-row/catalog-row.tsx
+18 -19
View File
@@ -2,7 +2,7 @@ import { memo, useEffect, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { useTranslation } from 'react-i18next';
import { Link, useLocation, useParams } from 'react-router-dom';
import { useFloating, offset, size, autoUpdate, Placement } from '@floating-ui/react';
import { useFloating, offset, size, Placement } from '@floating-ui/react';
import { Comment, useReplies } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js';
import { shouldShowSnow } from '../../lib/snow';
@@ -18,7 +18,6 @@ import { useCommentMediaInfo } from '../../hooks/use-comment-media-info';
import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
import useHide from '../../hooks/use-hide';
import useWindowWidth from '../../hooks/use-window-width';
import { ContentPreview } from '../../views/home/popular-threads-box';
import PostMenuDesktop from '../post-desktop/post-menu-desktop';
import styles from './catalog-row.module.css';
@@ -41,7 +40,7 @@ export const CatalogPostMedia = ({ cid, commentMediaInfo, linkWidth, linkHeight
const [hasError, setHasError] = useState(false);
const handleLoad = () => setIsLoaded(true);
const handleError = () => setHasError(true);
const loadingStyle = { display: isLoaded ? 'block' : 'none' };
const loadingStyle = { opacity: isLoaded ? 1 : 0 };
const { imageSize } = useCatalogStyleStore();
@@ -62,6 +61,9 @@ export const CatalogPostMedia = ({ cid, commentMediaInfo, linkWidth, linkHeight
displayHeight = 'unset';
}
const numericWidth = parseInt(displayWidth) || undefined;
const numericHeight = parseInt(displayHeight) || undefined;
const maxWidth = imageSize === 'Large' ? '250px' : '150px';
const maxHeight = imageSize === 'Large' ? '250px' : '150px';
@@ -75,20 +77,20 @@ export const CatalogPostMedia = ({ cid, commentMediaInfo, linkWidth, linkHeight
let thumbnailComponent: React.ReactNode = null;
if (type === 'gif' && gifFrameUrl && !hasError) {
thumbnailComponent = <img src={gifFrameUrl} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
thumbnailComponent = <img src={gifFrameUrl} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} width={numericWidth} height={numericHeight} />;
} else if (type === 'image' && !hasError) {
thumbnailComponent = <img src={url} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
thumbnailComponent = <img src={url} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} width={numericWidth} height={numericHeight} />;
} else if (type === 'video' && !hasError) {
thumbnailComponent = thumbnail ? (
<img src={thumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />
<img src={thumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} width={numericWidth} height={numericHeight} />
) : (
// show first frame of the video, as a workaround for Safari not loading thumbnails
<video src={`${url}#t=0.001`} onError={handleError} />
);
} else if (type === 'webpage' && !hasError) {
thumbnailComponent = <img src={thumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
thumbnailComponent = <img src={thumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} width={numericWidth} height={numericHeight} />;
} else if (type === 'iframe' && iframeThumbnail && !hasError) {
thumbnailComponent = <img src={iframeThumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
thumbnailComponent = <img src={iframeThumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} width={numericWidth} height={numericHeight} />;
} else if (type === 'audio') {
thumbnailComponent = <audio src={url} controls />;
}
@@ -143,8 +145,6 @@ const CatalogPost = memo(
const placementRef = useRef<Placement>('right-start');
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
const windowWidth = useWindowWidth();
const { refs, floatingStyles, update } = useFloating({
open: showPortal,
placement: placementRef.current,
@@ -154,9 +154,9 @@ const CatalogPost = memo(
apply({ elements }) {
const referenceElement = refs.reference.current;
if (referenceElement) {
const availableWidthToTheRight = windowWidth - (referenceElement.getBoundingClientRect().left + referenceElement.getBoundingClientRect().width);
const availableWidthToTheRight = window.innerWidth - (referenceElement.getBoundingClientRect().left + referenceElement.getBoundingClientRect().width);
const availableWidthToTheLeft = referenceElement.getBoundingClientRect().left;
const minWidth = windowWidth * 0.25;
const minWidth = window.innerWidth * 0.25;
if (availableWidthToTheRight >= minWidth) {
placementRef.current = 'right-start';
@@ -175,14 +175,13 @@ const CatalogPost = memo(
},
}),
],
whileElementsMounted: autoUpdate,
});
useEffect(() => {
update();
}, [update, windowWidth]);
if (showPortal) update();
}, [showPortal, update]);
const { replies } = useReplies({ comment: post, flat: true });
const { replies } = useReplies({ comment: showPortal ? post : undefined, flat: true });
const lastReply = replies?.length > 0 ? replies[replies.length - 1] : null;
const { isCommentAuthorMod: isCatalogPostAuthorMod, commentAuthorRole: catalogPostAuthorRole } = useEditCommentPrivileges({
@@ -336,14 +335,14 @@ interface CatalogRowProps {
row: Comment[];
}
const CatalogRow = ({ row }: CatalogRowProps) => {
const CatalogRow = memo(({ row }: CatalogRowProps) => {
return (
<div className={styles.row}>
{row.map((post, index) => (
<CatalogPost key={index} post={post} />
<CatalogPost key={post?.cid || index} post={post} />
))}
</div>
);
};
});
export default CatalogRow;
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>
);