Review follow-up. The viewport-scaled lookahead was unbounded, so a tall window prefetched several feed pages on every mount / filter change before any scroll — wasted work on the app's heaviest query. Clamp it to MAX_LOOKAHEAD_ROWS, and move the policy into a pure readAhead.ts (readAheadLookahead / shouldPrefetchNext) with unit tests covering the floor, the scaling, the cap boundary, and the fetch trigger — the core of the feed-scroll fix now has coverage instead of only manual E2E.
31 lines
1.7 KiB
TypeScript
31 lines
1.7 KiB
TypeScript
// Infinite-scroll read-ahead policy for VirtualGrid, extracted as a pure function so the decision is
|
|
// unit-testable without a layout engine.
|
|
//
|
|
// The next page is pulled once the last rendered row comes within `lookahead` rows of the loaded end,
|
|
// where lookahead scales with the number of rows the viewport currently renders (so it adapts to
|
|
// window height / column count / row height) but is clamped to a floor and a ceiling:
|
|
// - floor PREFETCH_ROWS: the finite-list / first-paint case where nothing is rendered yet.
|
|
// - ceiling MAX_LOOKAHEAD_ROWS: a tall window renders many rows, and an uncapped lookahead would
|
|
// eagerly prefetch several pages on every mount / filter change — wasted work on the app's
|
|
// heaviest query (the feed). The cap bounds that while still buffering a couple of screens ahead.
|
|
export const PREFETCH_ROWS = 4;
|
|
export const PREFETCH_VIEWPORTS = 2;
|
|
export const MAX_LOOKAHEAD_ROWS = 40;
|
|
|
|
/** How many rows ahead of the last rendered row to keep buffered, for a viewport rendering
|
|
* `renderedRows` rows. Clamped to [PREFETCH_ROWS, MAX_LOOKAHEAD_ROWS]. */
|
|
export function readAheadLookahead(renderedRows: number): number {
|
|
return Math.min(MAX_LOOKAHEAD_ROWS, Math.max(PREFETCH_ROWS, renderedRows * PREFETCH_VIEWPORTS));
|
|
}
|
|
|
|
/** Whether to fetch the next page: true once the last rendered row (`lastIndex`) is within the
|
|
* read-ahead window of the loaded end (`rowCount` total loaded rows). Because the caller re-runs
|
|
* this as each page settles, it chains — refilling the buffer as the user consumes it. */
|
|
export function shouldPrefetchNext(
|
|
lastIndex: number,
|
|
rowCount: number,
|
|
renderedRows: number,
|
|
): boolean {
|
|
return lastIndex >= rowCount - 1 - readAheadLookahead(renderedRows);
|
|
}
|