Custom API pagination | All requests from all pages are executed one after the other without us having scrolled to trigger them.

[valentin-mourtialon]

Has your issue been reported?

• I have searched the existing issues and confirm it has not been reported.
• I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

In the FlutterFlow interface, we have enabled pagination for one of our ListViews that retrieves data from a custom API. We have noticed something strange in test mode:

• all requests from all pages are executed one after the other without us having scrolled to trigger them…

We observed this with the network tab of the dev tools.

We made sure that the issue did not originate from our API by conducting internal tests and also by replicating the bug with the DummyJson API on an endpoint that supports pagination.

Expected Behavior

The behavior we were expecting is that the requests would only be made on demand, so on scroll. Although the data appears on the interface as soon as the first page is loaded, it significantly and unnecessarily overloads the backend.

Steps to Reproduce

On a blank project:

1. Add a custom API request that supports pagination (you can use DummyJson /products).
2. Create a new page.
3. Add a ListView that retrieves data from the custom API request you made in step 1.
4. Enable pagination on that ListView.
5. Enter test mode.
6. Open the network tab in the developer tools.
7. Observe all the successive requests being made without having you scrolling for.

Reproducible from Blank

• The steps to reproduce above start from a blank project.

Bug Report Code (Required)

ITEelM/luItJpb1K1pPccvl4rwMwJ0QlUIInj+0bWRMhfZDwPZoXO8mkahJLYteeSlBUBlf8rFo0pPDuivLpUcc6GE+ZfNVZz5RXQQqUVmSVR7nQEYe8PmtRI/xNCW6b17eNgRN/NfVZW0Ih2l2UPPCdG3qCf9qOYwx5e6fDbOY=

Context

Although the data appears on the interface as soon as the first page is loaded, it significantly and unnecessarily overloads the backend.

At the moment, we only use pagination to fetch lightweight data, but we would like to implement it for heavier types of data, such as images.

Visual documentation

The full video is too large to upload, but we've already sent it to a member of your team.

• https://github.com/FlutterFlow/flutterflow-issues/assets/88686764/1f6759d2-0d7b-4ad3-99b3-705bbad2fdd0

Additional Info

In the following issue, it seems to me that the user of this GitHub issue doesn't have quite the same problem because it appears he has the same pageNumber on each call, whereas we do not (see the video I sent you).

• The infinite scrolling of listview calls automatically. #2315

Environment

- FlutterFlow version: v4.1
- Platform: Web
- Browser name and version: Chrome Version 122.0.6261.95 (Official Build) (64 bits)

[diegoserranobst]

same here
This is my bug report code
ITFXhvLLuJVPm71E0M/uaMZVnmYwGUwbUOc7j9VEGAsjCePxOok2OfSlalRBWOqHSldme2GLo3EC+sGNiuLtFfkqCxCZbIBE+LhtUxDgcFunbLbQDKiSWXFCO/pNCECm0LSRgiZAIbN1SXwb7GeqJt6Ab3qCf9qOYwx5e6fDbOY=

[diegoserranobst]

please triage this

[ignalauret]

Hey @valentin-mourtialon thanks for your report. I just implemented a quick app fetching the products from DummyJson and it's working correctly for me on Test, Run and Deploy.
You can check it out here: https://pagination-sanbox-obakmt.flutterflow.app/

So could you describe me in which part of your app you are seeing this issue, so I can check if there is some misconfiguration?

[valentin-mourtialon]

Hi @ignalauret , hi @diegoserranobst 👋

We finally found out the issue. The post that helped us solve the problem is the following: https://community.flutterflow.io/ask-the-community/post/infinite-scroll-pagination-not-working-NzCZOXaBXFeI89o. In his latest post, the author claims to have solved the problem by, and I quote, "simplifying his widget tree".

That's pretty much what we've done on our side. Our Listview was in a "scrollable" column set to "primary" mode while our Listview was "NOT expanded", "non primary" and "shrink wrap".

So we made the following changes:

• 1st, we made our column non-scrollable,
• 2nd, we then "EXPANDED" our Listview, set it to "primary" and "disabled shrink wrap".

That's what worked for us. Hope it helps.

[ignalauret]

I see, the ListView was trying to render entirely so it fetched all the pages it could. I'm glad you where ever to figure it out, thanks for sharing the solution for anybody else that falls into the same issue.
Closing this issue, have a great day!