perf(bundle): replace plebbit-js imports with local utility, split chunks, fix CLS and rerenders

Eliminate direct @plebbit/plebbit-js (8.7MB) imports from all UI components by replacing
Plebbit.getShortAddress() with a local get-short-address utility. Add Vite manual chunks for
plebbit-js, plebbit-react-hooks, and react-spring/use-gesture. Fix catalog CLS by matching
skeleton to wrapper dimensions. Lazy-load ChallengeModal and ReplyModal. Add failed-URL cache
to useFetchGifFirstFrame, optimize useHide selector, and memoize useFeed options in mod-queue.
This commit is contained in:
plebeius
2026-02-26 16:42:36 +08:00
parent cd71602730
commit 4bdee0362d
16 changed files with 92 additions and 59 deletions
+20 -11
View File
@@ -622,12 +622,17 @@ export const ModQueueButton = ({ boardIdentifier, isMobile }: ModQueueButtonProp
// Only fetch if we have addresses to check and permissions
const shouldFetch = subplebbitAddresses.length > 0 && isModOfBoard;
const { feed } = useFeed({
subplebbitAddresses: shouldFetch ? subplebbitAddresses : [],
modQueue: ['pendingApproval'],
sortType: 'new',
postsPerPage: 200, // Fetch more items to get accurate pending count for the badge
});
const feedAddresses = shouldFetch ? subplebbitAddresses : [];
const feedOptions = useMemo(
() => ({
subplebbitAddresses: feedAddresses,
modQueue: ['pendingApproval'],
sortType: 'new' as const,
postsPerPage: 200,
}),
[feedAddresses],
);
const { feed } = useFeed(feedOptions);
if (!shouldFetch || subplebbitAddresses.length === 0) {
return null;
@@ -694,11 +699,15 @@ const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueViewProp
const subplebbit = useSubplebbit({ subplebbitAddress });
const { error: subplebbitError } = subplebbit || {};
const { feed, hasMore, loadMore, reset } = useFeed({
subplebbitAddresses,
modQueue: ['pendingApproval'],
postsPerPage: 50,
});
const feedOptions = useMemo(
() => ({
subplebbitAddresses,
modQueue: ['pendingApproval'],
postsPerPage: 50,
}),
[subplebbitAddresses],
);
const { feed, hasMore, loadMore, reset } = useFeed(feedOptions);
const setResetFunction = useFeedResetStore((state) => state.setResetFunction);
useEffect(() => {