[Masonry] Add virtualization support

[Primajin]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

There are some technical limitations for having many items in Masonry (see #27934 (comment)) - if we virtualize the center part we only need to render X things and might be able to workaround the limitation.

Furthermore we could use this for an infinite scroll Masonry gallery

Examples 🌈

https://mui.com/components/image-list/#masonry-image-list

Motivation 🔦

See summary

[hbjORbj]

There are some technical limitations for having many items in Masonry (see #27934 (comment)) - if we virtualize the center part we only need to render X things and might be able to workaround the limitation.

@Primajin Thanks for creating this issue. The main obstacles to virtualization for the current implementation of masonry component are that (1) items are not aligned in a row, as they are in a normal grid, and that (2) each item spans a different number of rows. Hence, deciding "when" to hide or display items is tricky.

I thought of using an Intersection observer API on every MasonryItem and hide an item (AFAIK, the only way to do this is to set grid-row-end to span 0) when its bottom is out of view. However, we need a dummy item that has the same height of the hidden grid item so that items do not move around. I couldn't find a way to achieve this.

Do you have any ideas on this?

[o-alexandrov]

@hbjORbj you might be interested in the ideas discussed in this thread:

• Dynamic masonry component TanStack/virtual#30

[zhouzi]

I see that this issue has been closed as completed but I can't find any documentation about it. What's mui's team's stance? Is it something that won't be implemented? Or perhaps there's a known working solution already?

cc @mbrookes