Cards with Lazy Loading

I want to create a Vaadin clone of this HubMovies
But for that I would need something like a VirtualList but with more than one column because I don’t want to create the cards for all movies in the database.

All ideas are appreciated

Hi Simon. I made this with OrderedList and List Items with appropriate css. I had to make a paginator as I didn’t find the way to implement infinity scrolling.

I used OrderedList and List Items with appropriate css

I would try it with and the ScrollToEndEvent (Edit: solution regarding a way to lazy load components)

Maybe even check this addon:

I used it to make this:

Thanks @disciplined-goat and @quirky-zebra for your tips.
I finally made it work with VScroller vom virtin

The code can be found here: sakila/vaadin/src/main/java/ch/martinelli/sakila/ui/views/films/ at main · simasch/sakila · GitHub

Virtual List | Components | Vaadin Docs would be another option that’s appropriate if the images are the same height

VirtualList does not work in that case because I need a responsive layout with up to four columns. VirtualList only provides one column

I tried your example, but sadly “ScrollToEndListener” is called only the first time when scrolling to the end.,

My example works. Probably it’s an issue with the compnent composition

bro when i implement this i got error like this, u know what’s error ?
java.lang.NoClassDefFoundError: com/vaadin/flow/component/polymertemplate/PolymerTemplate

Polymertemplate is not available in Vaadin 24.

If you’re a Prime or Ultimate customer, then there’s an addon to add support for Polymer Templates. There’s also a free tool to help convert them to lit templates.