Is it possible to use RGL with react-window, react-virtualization, or even with IntersectionObserver?

[oncet]

I've a large grid with many widgets (over 30), and each of them does a few requests to the backend and I'm trying to reduce the number of concurrent requests.

My first approach was using the Intersection Observer API to only make requests when the widget enters the viewport but problem is that all grid items starts at position top: 0, left: 0, so they are all inside the viewport and this triggers all requests at the same time.

Then I looked into react-window and react-virtualization but it looks like it might conflict with RGL because it also needs to control the style of the items.

So far only solution I can think of is manually delaying the rendering of the widget contents so when the Intersection Observer kicks in, all widgets are in their final positions.

Do you think there might be a better solution to this problem?