peter
540822d2b0
react-query's fetchNextPage cancels a next page still loading and sends it again by default.
Our requests ignore the abort signal, so the server ran both: the feed's read-ahead effect
re-runs on scroll frames before isFetchingNextPage reaches it, and on prod every feed page
went out 2-3 times (a 0.8 s title sort queued to 2.3 s). Every call now passes NEXT_PAGE
({cancelRefetch: false}), lint-enforced, with a contract test.
93 lines
3.7 KiB
TypeScript
93 lines
3.7 KiB
TypeScript
import type { Video, VideoStatus } from "../lib/api";
|
|
import { FEED_VIEW_SPEC, type FeedView } from "../lib/feedView";
|
|
import type { NEXT_PAGE } from "../lib/nextPage";
|
|
import VideoCard from "./VideoCard";
|
|
import { VideoMenu } from "./VideoMenu";
|
|
import { useContextMenu } from "./ui/useContextMenu";
|
|
import VirtualGrid from "./ui/VirtualGrid";
|
|
|
|
// Estimated row heights before measurement; real heights are measured per-row so these only affect
|
|
// the very first paint and the scrollbar's initial guess. Taken from measuring each mode in the
|
|
// browser rather than guessed — a bad estimate makes the scrollbar jump as you scroll in.
|
|
// RE-MEASURE these when a mode's layout changes: they have gone stale twice already, most recently
|
|
// when the E28 C1 action row moved onto the card's picture (cards 340 -> 262, small 257 -> 226).
|
|
// The card figures are the roughest of the set by nature — a card's height follows its column width
|
|
// (262 measured at 4 columns in a 1268px window), so no single constant is right for every window.
|
|
const ROW_EST: Record<FeedView, number> = {
|
|
cards: 262,
|
|
cardsSmall: 226,
|
|
rows: 117,
|
|
rowsCompact: 46,
|
|
tiles: 138,
|
|
};
|
|
|
|
export interface VirtualFeedProps {
|
|
items: Video[];
|
|
view: FeedView;
|
|
onState: (id: string, status: VideoStatus) => void;
|
|
onToggleSave: (id: string, saved: boolean) => void;
|
|
onResetState: (id: string) => void;
|
|
onOpen: (v: Video, startAt?: number | null) => void;
|
|
hasNextPage: boolean;
|
|
isFetchingNextPage: boolean;
|
|
fetchNextPage: (options: typeof NEXT_PAGE) => unknown;
|
|
}
|
|
|
|
// The feed's videos on the shared VirtualGrid engine — this wrapper only maps a FeedView to the
|
|
// grid's layout spec and renders a VideoCard per item. All the virtualization mechanics (measure,
|
|
// chunk, place, infinite-scroll) live in VirtualGrid.
|
|
export default function VirtualFeed({
|
|
items,
|
|
view,
|
|
onState,
|
|
onToggleSave,
|
|
onResetState,
|
|
onOpen,
|
|
hasNextPage,
|
|
isFetchingNextPage,
|
|
fetchNextPage,
|
|
}: VirtualFeedProps) {
|
|
const { minCol, colMaxWidth, maxCols, thumb } = FEED_VIEW_SPEC[view];
|
|
// The card menu (the video's whole action list, E28 C1) lives HERE rather than in each of the
|
|
// feed's callers: this is the list, and `useContextMenu`'s contract is one menu per list. Mounting
|
|
// it at this level is also what gives the channel page the menu for free — it renders
|
|
// `<Feed channelScoped>`, so it is the same component all the way down.
|
|
const menu = useContextMenu<Video>();
|
|
const openId = menu.open ? menu.target?.id : undefined;
|
|
return (
|
|
<>
|
|
<VirtualGrid
|
|
items={items}
|
|
getKey={(v) => v.id}
|
|
minCol={minCol}
|
|
colMaxWidth={colMaxWidth}
|
|
maxCols={maxCols}
|
|
rowEst={ROW_EST[view]}
|
|
hasNextPage={hasNextPage}
|
|
isFetchingNextPage={isFetchingNextPage}
|
|
fetchNextPage={fetchNextPage}
|
|
keyboardNav
|
|
renderItem={(v, itemWidth, index) => (
|
|
<VideoCard
|
|
video={v}
|
|
view={view}
|
|
navIndex={index}
|
|
// Only the one-line row (thumb:false) reads its own width — it stands columns down as it
|
|
// narrows. Everything else takes a stable 0, so a resize (which changes itemWidth every
|
|
// frame) doesn't blow past VideoCard's memo for views that wouldn't do anything with it.
|
|
width={thumb ? 0 : itemWidth}
|
|
onState={onState}
|
|
onToggleSave={onToggleSave}
|
|
onOpen={onOpen}
|
|
menuProps={menu.triggerProps}
|
|
menuButtonProps={menu.buttonProps}
|
|
// A boolean per card, not the open id: only the two cards whose answer changes re-render.
|
|
menuOpen={openId === v.id}
|
|
/>
|
|
)}
|
|
/>
|
|
<VideoMenu menu={menu} handlers={{ onState, onToggleSave, onResetState, onOpen }} />
|
|
</>
|
|
);
|
|
}
|