Dealing with blanks when scrolling fast (useWindowVirtualizer)

[GorillaDevq]

Hello TanStack Community! 👋

I’m working with @tanstack/react-table and @tanstack/react-virtual to render a large table with ~50 columns and 500+ rows. The virtualization works well, but during fast scrolling, newly scrolled-into-view rows render slowly, causing empty white gaps (especially with many columns). I want to replace these gaps with skeletons only for rows that are still rendering, while keeping already rendered rows intact.

My Current Approach
I tried using virtualizer.isScrolling to toggle skeletons for all rows during scrolling. While this hides white gaps, it has a critical flaw:

// Pseudocode: Replaces ALL rows with skeletons during any scroll
{virtualizer.isScrolling ? (
  virtualizer.getVirtualItems().map(/* render skeletons */)
) : (
  virtualizer.getVirtualItems().map(/* render real rows */)
)}

Problem: This forces skeletons for all rows during any scroll (even tiny movements), which feels jarring. I want skeletons only for newly entering rows while preserving already rendered ones.

What I Need

• Row-Specific Skeletons: Show skeletons only for rows that haven’t finished rendering yet.
• No Flickering: Avoid replacing already rendered rows with skeletons during scroll.
• Performance: With 50 columns, row rendering is heavy. Skeletons should act as temporary placeholders.

Any ideas?)