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
image.jpg

I would try it with https://github.com/viritin/flow-viritin/blob/v23/src/main/java/org/vaadin/firitin/components/orderedlayout/VScroller.java and the ScrollToEndEvent (Edit: solution regarding a way to lazy load components)

Maybe even check this addon: https://vaadin.com/directory/component/card/2.0.0.beta4/discussions

I used it to make this:
image.png

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/FilmsView.java 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.
https://vaadin.com/docs/latest/upgrading#polymer-templates