Dealing with blanks when scrolling fast.

[manuelsrleon]

Good morning.

I'm currently developing an app which has a virtualized list using react-virtual. The components being rendered in the list are quite big, so we've resorted to rendering a skeleton component instead, by making use of a useEffect that sets a isLoaded useState that dictates if the actual item or the skeleton renders.

I have tried to make the skeleton as light as possible since on a best scenario it should render instantaneously. However, it still is not fast enough and when scrolling a bit fast (I'm on a mobile platform, and quite a low end one) I will still see blanks.

One of the requisites is that these blank items should not be seen. However, it seems like there is no way to replace unloaded items with the skeleton, beyond the full-fat rendered items set by the overscan property.

The optimal solution would be that these items are actually loaded instead of the blanks, but if that does not work, we would probably need to stop the scrolling and show a loader at the end of the loaded buffer of items. However, I haven't found a reliable approach to check for items that have not been loaded yet, as the virtualizer doesn't seem to expose any attribute that would enable me to do so.

Anyone could shed light on this problem?

Thanks in advance