[Feature] Server side Infinite scrolling List Widget

[jsartisan]

Summary:

As a dev, I should be able to load a list data in an async manner with infinite scrolling pagination.

Requirements:

Title	Description	Comment
Pagination type	As a dev, I should be able to choose if the list should be paginated with number controls or load with infinite scrolling	This is still under debate, It might not make sense to add another widget for this and also the list component commonly operates with infinite scrolling
Items per page	How many items to render per api call. The size of the view port could automatically decide this	-
Loading threshold	Defines the number of items pending in the viewport from the un-scrolled area to identify the time to call the api again.	-

Front conversations

[somangshu]

@Nikhil-Nandagopal @areyabhishek we think this should be a separate widget to avoid complications and maintenance issue. Do you think it makes sense from the UX standpoint?

[Nikhil-Nandagopal]

@somangshu I don't think that makes sense because this widget will be the most widely used form of the list widget. I also don't see why implementation should differ between these 2. In fact I am ok killing this way of pagination in favor of only scroll method because this method of pagination was a hack we introduced but list widgets generally don't work like this

[somangshu]

@riodeuno @jsartisan can you explain why we choose to create a separate widget for this technically?

Also I think I would agree to this being the default and only pagination for the list widget! Does this solve out problem better? Although this will required some additional feedback / poll.

[jsartisan]

We will go with implementing the virtualized list in the same widget. Thinking to toggle the virtualization with a toggle control.

[dilippitchika]

@somangshu is there another issue for the list widget to scroll instead of pagination for all data on the client side? This small fix would actually improve the UX for a lot of list implementations.

Infinite scrolling can be done after we implement it for the table widget.

[somangshu]

@dilippitchika I did not catch what small fix you are talking about! I am also not sure if actually the table widget implementation for infinite scrolling will fix it for the list widget as well.

I think once we iron out the initial big problems, we will be able to get to these

[dilippitchika]

Agreed I am just using this to kick off a discussion, what i was referring to was list ONLY having pagination today and no scroll. If i don't want pagination, there's no way out of it.

Most list implementations have scroll and not pagination. However, we don't offer that choice to the user since we auto-paginate. We should allow a way to switch off pagination, because all items will simply show up in a scrollbar.

Infinite scrolling design i believe will be similar to what we do in the table widget, not from an implementation POV. This is what i was referring to.

[divyadeepsawhney]

I agree with @dilippitchika. Pagination should be a choice, not a forced option. I just got stuck because of this while creating a comment feed. How can I increase the number of records per page on a list? @areyabhishek @Nikhil-Nandagopal

[somangshu]

@divyadeepsawhney thanks for the opinion :) As Dilip pointed out the pagination is automatic today, So to have more records per page you just need to increase the height of the list widget. The list widget tries to accommodate as many items as possible on the viewport based on its height, Post that it will paginate the rest of the items. Hope this answers your questions!

[dilippitchika]

An internal user was looking for this - https://www.notion.so/appsmith/Rishabh-Kashyap-85ea180b031b42e58ef0f7a4910580cf

[lublak]

My thought is not only about asynchronous reloading. But also with data that can no longer be displayed in the list or table. With the list: If there are more data than are displayed we can automatically display pagination. There is no possibility here to make a list scrollable which I would prefer. The same applies to the tables. Here I would also like to see a scroll functionality. Although you can deactivate the pagination here. But that doesn't necessarily make the table scrollable. Whereby here in general would have to be looked over again. Here is an example for 10 records. Here should be just when pagination is active no longer scrollable or?

[dilippitchika]

@lublak we are tackling it for the table widget here - https://github.com/appsmithorg/appsmith/issues/13180

Regarding the list widget yes we plan to support scrolling as well here

[Nikhil-Nandagopal]

@lublak by the way if you're not using server side pagination, you can still achieve this in the table by turning the server side pagination option on. It will make the table scrollable but there will be performance issues if you're loading a very large data set

[lublak]

@Nikhil-Nandagopal Oh there I would not have thought about that this harken makes it scrollable. It is also not a lot of data. Maximum 20. Therefore this should be ok.

[dilippitchika]

@SatishGandham @ashit-rath internal doc for PRD, we will pick up design this week. https://www.notion.so/appsmith/List-widget-infinite-scrolling-403e612eb40a4db6a1a2c1b64037e7ca

[shastryy]

[Infinite scrolling designs ]

figma

loom & reasoning wip

[ogbofjnr]

Is there approximate date when this feature might be done?

[dilippitchika]

@ogbofjnr we are trying to pick this up early next year to deliver.

[honoru-washswat]

how did this end?

[somangshu]

@honoru-washswat is is still not prioritised by our team.

[m1ker1n]

I would like to have scrollable List Widget too

[laioncenet]

Hello Devs! I need help. How to create a vertical scrolling similar to a chat box for a live support system.

[wawa79]

Hello! Scrollable List Widget would be a nice feature. Pagination is just unusable when loading many records.

[Nikhil-Nandagopal]

@laioncenet vertical scroll is not yet supported.

@wawa79 you can paginate lots of records following this guide https://docs.appsmith.com/build-apps/how-to-guides/Setup-Server-side-Pagination-on-List

[laioncenet]

When will the inverted vertical scrolling feature for the table widget be launched?

[Nikhil-Nandagopal]

@laioncenet I'm not clear on what you mean by inverted vertical scrolling feature.

[laioncenet]

Okay, I'll give you an example: in the Retool tool, you have the option to create applications, and there is a template called AI Chat. Editing this model, the agent finds a chat message project, thus, when several messages are sent, a vertical scroll bar is created and it always descends automatically as messages are sent or the AI agent sends them to us.

So I think that in appsmith, would there be an option for the scroll bar instead of going up and down automatically? Do you have an estimate of whether this feature will be released?

I managed to create a chat app integrated with the WhatsApp Business API. However, the scroll bar keeps going up, so all new messages keep coming up.

The correct thing is for the messages to keep coming down.

What is the solution?

[jonathanroze]

Any news about this feature ? I would be a very nice feature... Waiting for!

[albseb511]

you can expose an event that reaches the bottom of the list element? onBottomReached, and maybe allow an offset from bottom. This can be achieved with Observation API.

[neilellis]

I agree with the previous comments about pagination, it's really clunky when you need to scan through a lot of items in a list. Infinite scroll is much more natural.