fix(bases): render filtered rows on first paint in standalone view

Track the scrollport element in state instead of reading
`scrollportRef.current` during render. The ref was always null on the
render that mounts the `.tableScrollport` div, so `useVirtualizer`'s
`_willUpdate` saw `scrollElement=null`, skipped observer attachment, and
`calculateRange` returned null — rendering zero rows even though the
`/rows` response was already in the React-Query cache.

The bug surfaced after a filter change (the `rowsLoading` skeleton path
remounts the scrollport, and no follow-on render is guaranteed once
`/rows` settles) but not on first base load (slower side queries forced
an extra render that coincidentally re-bound the virtualizer). Switching
views also masked it: the re-render triggered `_willUpdate` with a now-
populated ref.

Using a callback-ref-backed `useState` triggers a render the moment the
div attaches, so the virtualizer picks it up on the next pass — no
view-switch workaround needed.
This commit is contained in:
Philipinho
2026-05-25 15:53:28 +01:00
parent d1ebeffe19
commit ee3c5ce9d9
3 changed files with 17 additions and 9 deletions
@@ -26,7 +26,7 @@ type BaseTableProps = {
dropPosition: "above" | "below",
) => void;
persistViewConfig: () => void;
scrollportRef: React.RefObject<HTMLDivElement>;
scrollportEl: HTMLDivElement | null;
stickyBandPrelude?: React.ReactNode;
};
@@ -44,7 +44,7 @@ export function BaseTable({
onColumnReorder,
onResizeEnd,
onRowReorder,
scrollportRef,
scrollportEl,
stickyBandPrelude,
}: BaseTableProps) {
return (
@@ -60,7 +60,7 @@ export function BaseTable({
hasNextPage={hasNextPage}
isFetchingNextPage={isFetchingNextPage}
onFetchNextPage={onFetchNextPage}
scrollElement={embedded ? window : scrollportRef.current}
scrollElement={embedded ? window : scrollportEl}
stickyBandPrelude={stickyBandPrelude ?? null}
/>
);
@@ -1,4 +1,4 @@
import { useCallback, useEffect, useMemo, useRef } from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { Text, Stack } from "@mantine/core";
import { useAtom } from "jotai";
import { IconDatabase } from "@tabler/icons-react";
@@ -159,7 +159,15 @@ export function BaseView({ pageId, embedded }: BaseViewProps) {
clearSelection();
}, [pageId, activeView?.id, clearSelection]);
const scrollportRef = useRef<HTMLDivElement>(null);
// Track the scrollport element in state (not a ref) so the virtualizer's
// `_willUpdate` re-runs when the div attaches on first mount. Reading
// `scrollportRef.current` during render would always be null on the
// render that mounts the div, and no subsequent render is guaranteed —
// particularly after a filter change, where the scrollport remounts via
// the `rowsLoading` skeleton path. The virtualizer would then sit on
// `scrollElement=null`, render zero items, and only recover when
// something else forced a re-render (e.g. switching views).
const [scrollportEl, setScrollportEl] = useState<HTMLDivElement | null>(null);
const rows = useMemo(() => {
const flat = flattenRows(rowsData);
@@ -369,7 +377,7 @@ export function BaseView({ pageId, embedded }: BaseViewProps) {
onRowReorder={handleRowReorder}
onCardClick={handleCardClick}
persistViewConfig={persistViewConfig}
scrollportRef={scrollportRef}
scrollportEl={scrollportEl}
stickyBandPrelude={
<>
{banner}
@@ -397,7 +405,7 @@ export function BaseView({ pageId, embedded }: BaseViewProps) {
>
{banner}
{toolbar}
<div className={classes.tableScrollport} ref={scrollportRef}>
<div className={classes.tableScrollport} ref={setScrollportEl}>
<ViewRenderer
base={base}
rows={rows}
@@ -415,7 +423,7 @@ export function BaseView({ pageId, embedded }: BaseViewProps) {
onRowReorder={handleRowReorder}
onCardClick={handleCardClick}
persistViewConfig={persistViewConfig}
scrollportRef={scrollportRef}
scrollportEl={scrollportEl}
/>
</div>
</div>
@@ -28,7 +28,7 @@ type ViewRendererProps = {
) => void;
onCardClick: (rowId: string) => void;
persistViewConfig: () => void;
scrollportRef: React.RefObject<HTMLDivElement>;
scrollportEl: HTMLDivElement | null;
stickyBandPrelude?: React.ReactNode;
};