perf(replies): prefer cached board preview replies (#1101)

* perf(replies): prefer cached board preview replies

* fix(replies): address review feedback
This commit is contained in:
Tommaso Casaburi
2026-03-17 19:01:56 +08:00
committed by GitHub
parent 8d3c82f93a
commit 8c37258f20
5 changed files with 76 additions and 9 deletions
@@ -326,6 +326,8 @@ vi.mock('../../lib/utils/replies-preview-utils', () => ({
filterRepliesForDisplay: (replies: TestComment[]) => replies,
getPreviewDisplayReplies: (replies: TestComment[]) => replies,
getTotalReplyCount: ({ replyCount }: { replyCount?: number }) => replyCount ?? 0,
hasEnoughPreviewReplies: ({ replyCount, loadedCount, visibleCount }: { replyCount?: number; loadedCount: number; visibleCount: number }) =>
loadedCount >= Math.min(visibleCount, replyCount ?? visibleCount),
}));
vi.mock('../../lib/utils/thread-scroll-utils', () => ({
+28 -5
View File
@@ -49,7 +49,13 @@ import useQuotedByMap from '../../hooks/use-quoted-by-map';
import useProgressiveRender from '../../hooks/use-progressive-render';
import useFreshReplies from '../../hooks/use-fresh-replies';
import { BOARD_REPLIES_PREVIEW_FETCH_SIZE, BOARD_REPLIES_PREVIEW_VISIBLE_COUNT, REPLIES_PER_PAGE } from '../../lib/constants';
import { computeOmittedCount, filterRepliesForDisplay, getPreviewDisplayReplies, getTotalReplyCount } from '../../lib/utils/replies-preview-utils';
import {
computeOmittedCount,
filterRepliesForDisplay,
getPreviewDisplayReplies,
getTotalReplyCount,
hasEnoughPreviewReplies,
} from '../../lib/utils/replies-preview-utils';
import { isCommentArchived } from '../../lib/utils/comment-moderation-utils';
import { getThreadTopNavigationState, scrollThreadContainerToTop } from '../../lib/utils/thread-scroll-utils';
import useDeleteFailedPost from '../../hooks/use-delete-failed-post';
@@ -821,11 +827,27 @@ const PostDesktop = ({
const { showOmittedReplies, setShowOmittedReplies } = useShowOmittedReplies();
const shouldFetchPreview = showReplies && !isModQueue && !showAllReplies && showOmittedReplies[cid] !== true;
const shouldUsePreview = showReplies && !isModQueue && !showAllReplies;
const shouldFetchFull = showReplies && !isModQueue && (showAllReplies || showOmittedReplies[cid]);
const cachedPreviewRepliesResult = useReplies({
comment: shouldUsePreview ? resolvedPost : undefined,
onlyIfCached: true,
sortType: 'new',
flat: true,
repliesPerPage: BOARD_REPLIES_PREVIEW_FETCH_SIZE,
accountComments: { newerThan: Infinity, append: true },
});
const cachedPreviewReplies = (cachedPreviewRepliesResult as { updatedReplies?: Comment[] }).updatedReplies?.length
? (cachedPreviewRepliesResult as { updatedReplies?: Comment[] }).updatedReplies!
: cachedPreviewRepliesResult.replies || [];
const hasEnoughCachedPreview = hasEnoughPreviewReplies({
replyCount: resolvedPost?.replyCount,
loadedCount: cachedPreviewReplies.length,
visibleCount: BOARD_REPLIES_PREVIEW_VISIBLE_COUNT,
});
const previewRepliesResult = useReplies({
comment: shouldFetchPreview ? resolvedPost : undefined,
comment: shouldUsePreview && !showOmittedReplies[cid] && !hasEnoughCachedPreview ? resolvedPost : undefined,
sortType: 'new',
flat: true,
repliesPerPage: BOARD_REPLIES_PREVIEW_FETCH_SIZE,
@@ -839,9 +861,10 @@ const PostDesktop = ({
accountComments: { newerThan: Infinity, append: true },
});
const previewReplies = (previewRepliesResult as { updatedReplies?: Comment[] }).updatedReplies?.length
const livePreviewReplies = (previewRepliesResult as { updatedReplies?: Comment[] }).updatedReplies?.length
? (previewRepliesResult as { updatedReplies?: Comment[] }).updatedReplies!
: previewRepliesResult.replies || [];
const previewReplies = hasEnoughCachedPreview ? cachedPreviewReplies : livePreviewReplies;
const fullReplies = (fullRepliesResult as { updatedReplies?: Comment[] }).updatedReplies?.length
? (fullRepliesResult as { updatedReplies?: Comment[] }).updatedReplies!
: fullRepliesResult.replies || [];
@@ -875,7 +898,7 @@ const PostDesktop = ({
const totalReplyCount = getTotalReplyCount({
replyCount: resolvedPost?.replyCount,
fullLoadedCount: fullReplies.length,
previewLoadedCount: previewReplies.length,
previewLoadedCount: Math.max(cachedPreviewReplies.length, livePreviewReplies.length),
});
const repliesCount = computeOmittedCount({
totalReplyCount,
+25 -3
View File
@@ -44,7 +44,7 @@ import useProgressiveRender from '../../hooks/use-progressive-render';
import useFreshReplies from '../../hooks/use-fresh-replies';
import { BOARD_REPLIES_PREVIEW_FETCH_SIZE, BOARD_REPLIES_PREVIEW_VISIBLE_COUNT, REPLIES_PER_PAGE } from '../../lib/constants';
import { isCommentArchived } from '../../lib/utils/comment-moderation-utils';
import { filterRepliesForDisplay, getPreviewDisplayReplies } from '../../lib/utils/replies-preview-utils';
import { filterRepliesForDisplay, getPreviewDisplayReplies, hasEnoughPreviewReplies } from '../../lib/utils/replies-preview-utils';
import { getRenderableMobileBacklinks } from '../../lib/utils/reply-backlink-utils';
import { getThreadTopNavigationState, scrollThreadContainerToTop } from '../../lib/utils/thread-scroll-utils';
import useDeleteFailedPost from '../../hooks/use-delete-failed-post';
@@ -564,8 +564,26 @@ const PostMobile = ({
const boardPath = communityAddress ? getBoardPath(communityAddress, directories) : undefined;
const linksCount = useCountLinksInReplies(resolvedPost);
const shouldFetchReplies = showReplies && !isModQueue;
const shouldUsePreview = shouldFetchReplies && !showAllReplies;
const cachedPreviewRepliesResult = useReplies({
comment: shouldUsePreview ? resolvedPost : undefined,
onlyIfCached: true,
sortType: 'new',
flat: true,
repliesPerPage: BOARD_REPLIES_PREVIEW_FETCH_SIZE,
accountComments: { newerThan: Infinity, append: true },
});
const cachedPreviewReplies = (cachedPreviewRepliesResult as { updatedReplies?: Comment[] }).updatedReplies?.length
? (cachedPreviewRepliesResult as { updatedReplies?: Comment[] }).updatedReplies!
: cachedPreviewRepliesResult.replies || [];
const cachedPreviewDisplayCount = filterRepliesForDisplay(cachedPreviewReplies).length;
const hasEnoughCachedPreview = hasEnoughPreviewReplies({
replyCount: resolvedPost?.replyCount,
loadedCount: cachedPreviewDisplayCount,
visibleCount: BOARD_REPLIES_PREVIEW_VISIBLE_COUNT,
});
const previewRepliesResult = useReplies({
comment: shouldFetchReplies && !showAllReplies ? resolvedPost : undefined,
comment: shouldUsePreview && !hasEnoughCachedPreview ? resolvedPost : undefined,
sortType: 'new',
flat: true,
repliesPerPage: BOARD_REPLIES_PREVIEW_FETCH_SIZE,
@@ -578,7 +596,11 @@ const PostMobile = ({
repliesPerPage: REPLIES_PER_PAGE,
accountComments: { newerThan: Infinity, append: true },
});
const repliesResult = showAllReplies ? fullRepliesResult : previewRepliesResult;
const livePreviewReplies = (previewRepliesResult as { updatedReplies?: Comment[] }).updatedReplies?.length
? (previewRepliesResult as { updatedReplies?: Comment[] }).updatedReplies!
: previewRepliesResult.replies || [];
const previewReplies = hasEnoughCachedPreview ? cachedPreviewReplies : livePreviewReplies;
const repliesResult = showAllReplies ? fullRepliesResult : { ...previewRepliesResult, replies: previewReplies, updatedReplies: previewReplies };
const { replies, hasMore, loadMore } = repliesResult;
const updatedReplies = (repliesResult as { updatedReplies?: Comment[] }).updatedReplies;
const repliesForRender = updatedReplies?.length ? updatedReplies : replies || [];