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): reduce Virtuoso overscan and memoize itemContent for multiboard views

Browse Source
This commit is contained in:
plebeius
2026-02-26 17:27:58 +08:00
parent 6ac9ac0ee7
commit 6e08203ce6
3 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/board/board.tsx
+5 -3
View File
@@ -1,4 +1,4 @@
import { useEffect, useMemo, useRef } from 'react'; import { useCallback, useEffect, useMemo, useRef } from 'react';
import { useLocation, useNavigate, useNavigationType, useParams } from 'react-router-dom'; import { useLocation, useNavigate, useNavigationType, useParams } from 'react-router-dom';
import { Comment, useAccount, useAccountComments, useAccountSubplebbits, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { Comment, useAccount, useAccountComments, useAccountSubplebbits, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { useSubplebbitField } from '../../hooks/use-stable-subplebbit'; import { useSubplebbitField } from '../../hooks/use-stable-subplebbit';
@@ -291,6 +291,8 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, i
const virtuosoStateKey = feedCacheKey ? `${feedCacheKey}-${BOARD_SORT_TYPE}` : `${location.pathname}-${BOARD_SORT_TYPE}`; const virtuosoStateKey = feedCacheKey ? `${feedCacheKey}-${BOARD_SORT_TYPE}` : `${location.pathname}-${BOARD_SORT_TYPE}`;
const navigationType = useNavigationType(); const navigationType = useNavigationType();
const boardItemContent = useCallback((index: number, post: Comment | undefined) => <Post index={index} post={post} />, []);
const hasBeenVisibleRef = useRef(false); const hasBeenVisibleRef = useRef(false);
useEffect(() => { useEffect(() => {
if (isVisible && !hasBeenVisibleRef.current) { if (isVisible && !hasBeenVisibleRef.current) {
@@ -353,11 +355,11 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, i
{effectiveInfiniteScroll ? ( {effectiveInfiniteScroll ? (
<Virtuoso <Virtuoso
defaultItemHeight={300} defaultItemHeight={300}
increaseViewportBy={{ bottom: 1200, top: 1200 }} increaseViewportBy={isInAllView || isInSubscriptionsView || isInModView ? { bottom: 600, top: 600 } : { bottom: 1200, top: 1200 }}
totalCount={displayFeed.length} totalCount={displayFeed.length}
data={displayFeed} data={displayFeed}
computeItemKey={(index, post) => post?.cid || `post-${index}`} computeItemKey={(index, post) => post?.cid || `post-${index}`}
itemContent={(index, post) => <Post index={index} post={post} />} itemContent={boardItemContent}
useWindowScroll={true} useWindowScroll={true}
components={footerComponents} components={footerComponents}
endReached={hasMore ? loadMore : undefined} endReached={hasMore ? loadMore : undefined}
src/views/catalog/catalog.tsx
+1 -1
View File
@@ -503,7 +503,7 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
<> <>
<Virtuoso <Virtuoso
defaultItemHeight={imageSize === 'Large' ? 320 : 200} defaultItemHeight={imageSize === 'Large' ? 320 : 200}
increaseViewportBy={{ bottom: 1200, top: 1200 }} increaseViewportBy={isInAllView || isInSubscriptionsView || isInModView ? { bottom: 600, top: 600 } : { bottom: 1200, top: 1200 }}
totalCount={rows?.length || 0} totalCount={rows?.length || 0}
data={rows} data={rows}
itemContent={(index, row) => <CatalogRow index={index} row={row} />} itemContent={(index, row) => <CatalogRow index={index} row={row} />}
src/views/mod-queue/mod-queue.tsx
+3 -3
View File
@@ -771,7 +771,7 @@ const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueViewProp
data={feed} data={feed}
totalCount={feed.length} totalCount={feed.length}
endReached={loadMore} endReached={loadMore}
increaseViewportBy={{ bottom: 1200, top: 1200 }} increaseViewportBy={{ bottom: 600, top: 600 }}
itemContent={(index, comment) => <ModQueueRow key={comment.cid} comment={comment} isOdd={index % 2 === 0} />} itemContent={(index, comment) => <ModQueueRow key={comment.cid} comment={comment} isOdd={index % 2 === 0} />}
components={footerComponents} components={footerComponents}
/> />
@@ -799,7 +799,7 @@ const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueViewProp
data={feed} data={feed}
totalCount={feed.length} totalCount={feed.length}
endReached={loadMore} endReached={loadMore}
increaseViewportBy={{ bottom: 1200, top: 1200 }} increaseViewportBy={{ bottom: 600, top: 600 }}
itemContent={(_index, comment) => <ModQueueCard key={comment.cid} comment={comment} />} itemContent={(_index, comment) => <ModQueueCard key={comment.cid} comment={comment} />}
components={footerComponents} components={footerComponents}
/> />
@@ -827,7 +827,7 @@ const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueViewProp
data={feed} data={feed}
totalCount={feed.length} totalCount={feed.length}
endReached={loadMore} endReached={loadMore}
increaseViewportBy={{ bottom: 1200, top: 1200 }} increaseViewportBy={{ bottom: 600, top: 600 }}
itemContent={(_index, comment) => <ModQueueFeedPost key={comment.cid} comment={comment} />} itemContent={(_index, comment) => <ModQueueFeedPost key={comment.cid} comment={comment} />}
components={footerComponents} components={footerComponents}
/> />