Possibility for granular display of row placeholders when scrolling

[radu-cs]

Is it possible to display placeholders only for the rows that are not in the view or in the over scan range when scrolling?

Using isScrolling is a too broad state to be really useful, especially when having table cells that are expensive to render.

Looking forward for any suggestion.
Thank you.

[MILLERMARRU]

isScrolling is a single boolean for the whole virtualizer, so you're right that it's too coarse for "only placeholder the rows that are actually new, keep already-rendered expensive cells as-is." The virtualizer doesn't have a built-in per-item "is this newly revealed by this scroll event" flag, but you can derive one yourself from getVirtualItems(), since each call gives you the current set of indices, and comparing that against what you rendered last frame tells you exactly which rows are new versus already-measured:

const renderedIndices = useRef(new Set<number>())

const virtualItems = virtualizer.getVirtualItems()
const newIndices = new Set(virtualItems.map((item) => item.index))

// after render, before the next one:
useEffect(() => {
  renderedIndices.current = newIndices
})

// in your row renderer:
{virtualItems.map((item) => {
  const isNewlyVisible = !renderedIndices.current.has(item.index)
  return isNewlyVisible
    ? <RowPlaceholder key={item.key} style={...} />
    : <ExpensiveRow key={item.key} data={data[item.index]} style={...} />
})}

This gives you exactly the granularity you're after, rows already in renderedIndices (previously rendered, just shifted within the viewport) keep rendering their real content, only genuinely new rows entering the overscan range get the cheap placeholder, and it naturally upgrades to the real row on the next render once it's been "seen" once. It's more bookkeeping than the built-in isScrolling flag, but it's the accurate signal you're describing, since isScrolling can't distinguish "this row has been on screen the whole scroll" from "this row just entered view," this Set-diff approach can.