Infinite Scroll (loading data fom server connect) Similar to Lazy Load

Would love this feature.

1 Like

Has anyone tried this hack for infinite scroll by TomD? Does it work?

1 Like

This method does work (it was suggested by @transcoderm - not me). I’m sure the feature will be built into Wappler at some point.

2 Likes

Let’s add this.

Becoming more and more essential. We are in the process of building a community mobile application with hundreds/thousands of traders and organisers and pagination is looking a little old and tired these days… Any further considerations on implementing this highly requested feature soon please #TeamWappler?

Am not after a work around or hack, script, or piece of code thanks to any offering…

:wink:

1 Like

It can be achieved with a single variable which can even be copy/pasted to different sites - just by editing the server connect name. No additional javascript or hacks - just Wappler. I’ll paste an example if you like (but I don’t want to give you an unwelcome code offering :slightly_smiling_face:)

I haven’t made much use of it, so my example might be a little basic or missing what such a feature could add.

5 Likes

I’m always happy to eat my own words Tom. You know how it is. I don’t want to start importing unnecessary libraries that we’ll have to clean up later. Sounds like you have a simple work around that won’t be a pain in the arse to update when Wappler integrates such an offering… Am interested to know more Sir.

2 Likes

I certainly do.

You will need to add the browser component. You will probaby want to experiment with the settings too. I can’t remember why I added the debounce. It seemed a good idea at the time so I’ve kept it with a low value for when I next experiment, rather than removing it.

<dmx-value id="scroll_pos" dmx-bind:value="browser1.scrollY.position"
  dmx-on:updated.debounce:100="browser1.scrollY.position >=0.7 ? serverconnect1.load({limit: serverconnect1.data.qry_allitems.limit + 20}): null"></dmx-value>

Finally, I should mention that this idea was from one of @transcoderm’s posts.

8 Likes

Thanks Tom and @transcoderm! Very appreciated will give it a go.

:slight_smile:

There is a slight flaw with this method. It starts off fine - as you scroll a new query is run as the limit increases:

image

However, after a while, a lot of data could be downloaded with each scroll, if there are a lot of records:

image

This could be prevented by changing the offset too, but then you won’t see all of the content which has been downloaded if you scroll up.

There is obviously a better way to do it. If this forum is scrolled, the content remains visible (ie if you move the scroll button up or down), and yet the requests don’t get bigger and bigger:

image

I would like this feature, please Wappler team make it happen :slightly_smiling_face:

1 Like

Just saw this is one of the most voted requests.

Infinite scroll only makes sense in very few scenarios. Mobile and timeline pages with no footer(like discourse for instance).

If not implemented correctly it can become a UX nightmare. There are stories out there of people that have been chasing a specific footer for years.

I prefer to use a “Load More” link/button as it gives the final user sense of control over the UI.

But it would be nice for certain scenarios indeed.

2 Likes

Tabulator has this functionality – ajax progressive.

1 Like

Bumping this request!

Bumping again. Essential for mobile apps. :wink:

1 Like

Be sure to vote here as well …

1 Like

Bumping again

There is already an infinite scroll component in the extensions library here:


It works perfectly.

The full list of extensions is here:
https://community.wappler.io/c/wappler-extensions/54

Unfortunately Ken’s extension does not work in mobile projects due to limitations in custom components in mobile projects.