CODEWITHSUNDEEP
reactjsreact-virtualizedreact-virtual
xaunlopez
xaunlopez

Reputation: 398

react-virtual variable sizing with images not calculating on initial load

I want to render a virtualized list of images with variables heights, my current implementation is following the variable example on tanstack docs, but adding a random height src image and loading that instead of text as the content for the row item.

This is not working great and is a bit glitchy. Im using a best guess estimateSize but was hoping for a system that would fully calculate this for me.

The height is completely off until you scroll at least once, then the image heights seem to get calculated. Otherwise, once you start scrolling, the performance here is pretty good.

Any feedback on this implementation (no idea if this is how it's intended to be implemented), or indication on how I can fix the problem would be appreciated. Thanks!

My demo here: https://codesandbox.io/s/boring-ishizaka-yiywvo?file=/src/main.jsx

p.s if you know how to achieve this with react-virtualized (with CellMeasurer) also keen to hear/see it. I've struggled with CellMeasurer and image onLoad to calc correctly.

Upvotes: 1

Views: 3272

Answers (1)

xaunlopez
xaunlopez

Reputation: 398

Ok dug through some github issues, and mashed a few things together and this seems to be working well. https://codesandbox.io/s/usevirtualresizeobserver-04-11-2021-forked-yur6we?file=/src/App.tsx

It uses a custom wrapper that leverages ResizeObserver, shame this isn't something that's exported from the lib considering this would be a very common use case.

Upvotes: 1

Related Questions