Is it possible to implement virtual scrolling in weweb?

I tried to implement infinite scrolling using this method https://www.youtube.com/watch?v=f7lM-yqWJqY&t=1s

So I initially load 10 items then gradually adding it as the user scroll down. But the problem is as the #number of data reach 50-60 my app is crashed on mobile.

In my research, I found out there’s something called virtual scrolling. A method to only render the data that are visible in the viewport.

Does implementing like this is possible? And if it’s possible, how to do it? or maybe it’s already in weweb? or maybe I set up

I don’t have much knowledge on code stuff but I’m willing to learn it if it’s possible

tagging @Joyce maybe you know something about this?

I’m utilizing infinite scrolls for supabase table with several thousand entries, working very good, also on mobile, no crashing :slight_smile:

Wow that’s super impressive, how did you that? @thomlov ?

Did you use custom code?

How complex the element you render? I’ve a hunch that my component is too complex.

I did a lighthouse and notified that there’s an excessive DOM, maximum number child element, which is the same number of entries rendered in the browser.


Sorry for asking you a lot of question, I’m super excited and curious!

This will get fixed soon, it’s actually very likely to be a WeWeb thing, as now it uses quite some elements. I wouldn’t worry about this though. I wouldn’t worry about lighthouse at all with WebApps honestly.

Mine is not complex at all. It’s a table, and I remove most columns on mobile (using conditional rendering)