build directory-beta similar ui

Hey, I was wondering how the new https://vaadin.com/directory-beta/ ui is build.
What is being used to generate that infinite scrolling and auto loading of new elements? Is it custom made or would it be possible with Vaadin Flow?

It’s open source and can be found here https://github.com/vaadin/directory

Oh wow it’s even open source, thanks alot

Yes it is. It is made with Hilla, but I think equally doable with Vaadin. The infinite scrolling is made using IntersectionObserver (there is also a button, which you rarely see) which makes a new DB query and adds Card elements to layout.

The load-more button / infinite scroller could be a good add-on :thinking:

You can check something similar here: Discord

For flow this time :slightly_smiling_face:

IntersectionObserver is more efficient though :nerd_face:

Yes a couple of years ago I used iron-scroll-threshold, it’s working well. But feel free to use the IntersectionObserver, There is also this addon that might have something you need, (ComponentObserver). if you’re not comfortable with js :slightly_smiling_face:

The ScrollToEndListener might be a bit buggy if you are changing the width of the view (then you could reach the end without scrolling)

One thing you can do is to add a button load more at the end of the loaded items and when it’s visible, get the next page then add a next page button

Thank you guys for your input :slightly_smiling_face: Very appreciated