When scrolling it shows blank list items
So I implemented Virtualization and when I scroll down fast I get blank component for a second and then component loads afterwards
11 Replies
yelping-magenta•2y ago
It boils down that browser can't keep up with rendering while fast scrolling. You can try to optimaize rows, or render a placeholder when scrolling.
extended-salmon•2y ago
Getting the blank element almost on any scroll drag fast
React v18.2
Macbook Pro M1
Chrome latest
yelping-magenta•2y ago
Hi, hard to say what is happening without an example, checkout what is taking time when rendering
plain-purple•2y ago
Sorry to necro this one, but the issue will happen even with the default fixed grid example if you increase the size of the window a bit. A problem that's present with every virtualisation library as far as I can tell. It's not nearly as bad when not in react dev mode, but fixing it is a question I've been wrestling with a bit for the last few days.
A few options that come to mind are:
1. Preventing scroll until elements are rendered (jerky UX if not fast enough)
2. Skipping calculation of widths if scrolling vertically or calculation of heights if scrolling horizontally since these won't change. Diagonal scrolling would obviously be an edge case.
3. Persisting existing rendered data to avoid re-rendering.
Have any of these, other other strategies been successfully used by anyone else to resolve this concern?
rare-sapphire•17mo ago
Hi @piecyk , i see this same issue and here's an example https://github.com/TanStack/virtual/issues/685 any help/guidance appreciated 🙂 for me it happens more with react 18.
GitHub
Rendering lag when using virtualised for both rows and columns alon...
Describe the bug I'm currently using table + virtual in this example here Blank page is shown when scrolling horizontally and vertically, lots of warning that scroll handler took too long Your ...
plain-purple•17mo ago
Hey, if this is a big issue for you as it was for me, you can look into using an HTML Canvas-based grid. This is the tech Google uses for Sheets, and there is at least one fairly good open source solution out there for it.
rare-sapphire•17mo ago
Will consider the alternative thanks but i'd first like to see if this is something fixable in the library
yelping-magenta•17mo ago
Yep, overall it's not a trivial issue and no one size fits all
rare-sapphire•17mo ago
For those looking into it for the future managed to lower down the blank screen by quite a bit by
- Memoing the already rendered body when scrolling as much as possible (Already visible items don't have to rerender at all even if their start position changes)
- Delaying column rendering with useTransition or requestAnimationFrame so that on high speed scroll a "Skeleton" of row renders and then it async renders the cells
A bit unreasonable to expect it will always load fast on high scroll speed so this "loader" and async behaviour is ok for my use case tested also react-window and same behaviour is present there. i'm not expecting to be google sheets any time soon and have a lot of custom cells that would need to be developed basically from scratch in any HTML Canvas grid which isn't worth the time atm but definitely could be an option for others
ambitious-aqua•17mo ago
I'm running into this problem as well. Do you have any code examples with useTransition or requestAnimationFrame I can take a look at?
quickest-silver•16mo ago
@Daniel Prato How did you render a placeholder and the rows async?