infinite scroll issues

[la22222]

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

When you activate infinite scroll, it makes all possible API calls and loads all items at once (around 20 API calls) upon loading the page, without even scrolling down.

Expected Behavior

The expected behavior is for it to load the first page, and as you scroll down, it should load the subsequent pages.

Steps to Reproduce

1.Create a new page
2.Add a listView
3.Add a Backend Query with a bunch of items
4.Enable Infinite Scroll
5.Run

Reproducible from Blank

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

Bug Report Code (Required)

IT4ej8nf049Om+EA7q6JY/oxhiYXNn07aI0zmOt+dAw3F4jpPaQUfOj+QG9tUsvieFZiJWf/8XIK0NLUvYfXVPo9PiieUYhAz5d+dTv/Tlm6SpTXC4eZOUdSROVmCkOHzbS3gwhAPsd1LloD32WYFt69EynZJoTGPm4zMOaHKd/AjAriKyLOXn0Jg1ZSfCvr

Context

One of the most important pages in my app has a ListView that contains 4k items, and due to pagination not working properly, it loads all 4k items at once and freezes my app.

Visual documentation

Screen.Recording.2023-08-08.at.6.11.54.PM-2.mp4

In the video, it's shown that upon loading the page, the ListView makes 22 API calls without even having scrolled, and the app freezes.

Additional Info

No response

Environment

- FlutterFlow version: v1.1.94
- Platform:MacOS Desktop Web
- Browser name and version: Chrome
- Operating system and version affected:Ventura 13.5

[katherineqian]

Hi,

Thanks for submitting and for taking the time to create this test project, which is always greatly appreciated for debugging. When infinite scroll is enabled, the ListView's parent needs to have a constrained height. Otherwise, the ListView needs the shrinkWrap parameter to be true, which builds all of the children in the ScrollView at once (because it is trying to determine the height of the content - see Flutter docs on shrinkWrap). You can also references this issue or this issue raised on the infinite_scroll_pagination repo for more commentary on the topic. I tried adding a container with a max height around the ListView, which indeed resolved the API call issue.

We should add this to the documentation on our end. Thanks for raising this!

[dev-angelo-c]

Not exactly related but wanted to make mention while digging around that, Infinite Scroll not available in Listview. Windows 10 PWA version.