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

Any news on this feature?

CRM, chats, various custom lists and tables. All this currently requires this function.

I’m working on a project where there are a lot of tables with a lot of data. When I told the customer that the tables will be pagination, he looked at me questioningly “in what century do you live…?”

1 Like

It would be cool if the implementation of this function, it would be possible through Wappler to configure the inversion of the data upload - if we do an inversion, the data is not uploaded from the top down, but from the bottom up. If there was such a setting, it would be possible to create a messenger in just a couple of clicks.

1 Like

No news as of yet. 28 votes and counting…

@George @patrick

1 Like

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.

4 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.

1 Like

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:

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.

1 Like

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 …