fix(ui): a read-ahead waits out a background refetch, and a revealed row is mounted before it is focused
NEXT_PAGE joins ANY fetch in flight: a read-ahead during an invalidation or a poll joined that refetch and appended no page, and nothing asked again until the reader moved the range (the channel page during a backfill). The read-ahead now waits while the list fetches anything (mayReadAhead, re-run on isFetching); a Load older click cancels a poll instead (nextPageOnClick). A page turn to a revealed row restarted the progressive mount at 30 rows; Channels focuses that row in the next commit, and at index 40 of a 50-row page it was not there, so focus fell to <body>. The mount now reaches through the revealed row.
This commit is contained in:
@@ -18,16 +18,21 @@ export const STEP_ROWS = 40;
|
||||
// `view` names what the rows show (page, size, sort, filters). A new view starts over from the first
|
||||
// rows, so the urgent render after a click or a key stays small. New data for the same view (a refetch)
|
||||
// does not: it would drop the rows the reader is looking at.
|
||||
export function useProgressiveRows<T>(rows: T[], view: string): T[] {
|
||||
//
|
||||
// `through` is a row that must be in the DOM in THIS render: the row a page turn was made to show
|
||||
// (DataTable's `reveal`). Its page is a new view, and the caller focuses that row right after the
|
||||
// commit — at index 40 of a 50-row page it was not mounted yet, and focus fell to <body> (E31 S5).
|
||||
export function useProgressiveRows<T>(rows: T[], view: string, through = -1): T[] {
|
||||
const [seen, setSeen] = useState(view);
|
||||
const [limit, setLimit] = useState(FIRST_ROWS);
|
||||
if (seen !== view) {
|
||||
setSeen(view);
|
||||
setLimit(FIRST_ROWS);
|
||||
}
|
||||
const more = rows.length > limit;
|
||||
const count = Math.max(limit, through + 1);
|
||||
const more = rows.length > count;
|
||||
useEffect(() => {
|
||||
if (more) startTransition(() => setLimit(limit + STEP_ROWS));
|
||||
}, [more, limit]);
|
||||
return more ? rows.slice(0, limit) : rows;
|
||||
if (more) startTransition(() => setLimit(count + STEP_ROWS));
|
||||
}, [more, count]);
|
||||
return more ? rows.slice(0, count) : rows;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user