mirror of
https://github.com/docmost/docmost.git
synced 2026-08-29 10:05:03 +08:00
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:
@@ -26,7 +26,7 @@ type BaseTableProps = {
|
|||||||
dropPosition: "above" | "below",
|
dropPosition: "above" | "below",
|
||||||
) => void;
|
) => void;
|
||||||
persistViewConfig: () => void;
|
persistViewConfig: () => void;
|
||||||
scrollportRef: React.RefObject<HTMLDivElement>;
|
scrollportEl: HTMLDivElement | null;
|
||||||
stickyBandPrelude?: React.ReactNode;
|
stickyBandPrelude?: React.ReactNode;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -44,7 +44,7 @@ export function BaseTable({
|
|||||||
onColumnReorder,
|
onColumnReorder,
|
||||||
onResizeEnd,
|
onResizeEnd,
|
||||||
onRowReorder,
|
onRowReorder,
|
||||||
scrollportRef,
|
scrollportEl,
|
||||||
stickyBandPrelude,
|
stickyBandPrelude,
|
||||||
}: BaseTableProps) {
|
}: BaseTableProps) {
|
||||||
return (
|
return (
|
||||||
@@ -60,7 +60,7 @@ export function BaseTable({
|
|||||||
hasNextPage={hasNextPage}
|
hasNextPage={hasNextPage}
|
||||||
isFetchingNextPage={isFetchingNextPage}
|
isFetchingNextPage={isFetchingNextPage}
|
||||||
onFetchNextPage={onFetchNextPage}
|
onFetchNextPage={onFetchNextPage}
|
||||||
scrollElement={embedded ? window : scrollportRef.current}
|
scrollElement={embedded ? window : scrollportEl}
|
||||||
stickyBandPrelude={stickyBandPrelude ?? null}
|
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 { Text, Stack } from "@mantine/core";
|
||||||
import { useAtom } from "jotai";
|
import { useAtom } from "jotai";
|
||||||
import { IconDatabase } from "@tabler/icons-react";
|
import { IconDatabase } from "@tabler/icons-react";
|
||||||
@@ -159,7 +159,15 @@ export function BaseView({ pageId, embedded }: BaseViewProps) {
|
|||||||
clearSelection();
|
clearSelection();
|
||||||
}, [pageId, activeView?.id, 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 rows = useMemo(() => {
|
||||||
const flat = flattenRows(rowsData);
|
const flat = flattenRows(rowsData);
|
||||||
@@ -369,7 +377,7 @@ export function BaseView({ pageId, embedded }: BaseViewProps) {
|
|||||||
onRowReorder={handleRowReorder}
|
onRowReorder={handleRowReorder}
|
||||||
onCardClick={handleCardClick}
|
onCardClick={handleCardClick}
|
||||||
persistViewConfig={persistViewConfig}
|
persistViewConfig={persistViewConfig}
|
||||||
scrollportRef={scrollportRef}
|
scrollportEl={scrollportEl}
|
||||||
stickyBandPrelude={
|
stickyBandPrelude={
|
||||||
<>
|
<>
|
||||||
{banner}
|
{banner}
|
||||||
@@ -397,7 +405,7 @@ export function BaseView({ pageId, embedded }: BaseViewProps) {
|
|||||||
>
|
>
|
||||||
{banner}
|
{banner}
|
||||||
{toolbar}
|
{toolbar}
|
||||||
<div className={classes.tableScrollport} ref={scrollportRef}>
|
<div className={classes.tableScrollport} ref={setScrollportEl}>
|
||||||
<ViewRenderer
|
<ViewRenderer
|
||||||
base={base}
|
base={base}
|
||||||
rows={rows}
|
rows={rows}
|
||||||
@@ -415,7 +423,7 @@ export function BaseView({ pageId, embedded }: BaseViewProps) {
|
|||||||
onRowReorder={handleRowReorder}
|
onRowReorder={handleRowReorder}
|
||||||
onCardClick={handleCardClick}
|
onCardClick={handleCardClick}
|
||||||
persistViewConfig={persistViewConfig}
|
persistViewConfig={persistViewConfig}
|
||||||
scrollportRef={scrollportRef}
|
scrollportEl={scrollportEl}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ type ViewRendererProps = {
|
|||||||
) => void;
|
) => void;
|
||||||
onCardClick: (rowId: string) => void;
|
onCardClick: (rowId: string) => void;
|
||||||
persistViewConfig: () => void;
|
persistViewConfig: () => void;
|
||||||
scrollportRef: React.RefObject<HTMLDivElement>;
|
scrollportEl: HTMLDivElement | null;
|
||||||
stickyBandPrelude?: React.ReactNode;
|
stickyBandPrelude?: React.ReactNode;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user