I'm creating an app that shows products from the database (using API request).
Here's how organized everything:
On the screen below: container has fixed height (calculated based on the screen height), Column in scrollable+primary.
For GridView there is backend query set with all required parameters. Skip is set to "nextPage * LIMIT"
sort and filters parameters are set from the component (filtering menu) state variables
This component has an action parameter that calls the refresh database request (see below)
API response model is on the screen below. Total always return total items in db based on the parameters.
I haven't noticed any problems until I added filtering and sorting to this screen.
So I choose sorting value, refresh database request, list is reloaded with random data - sometimes it shown correct order, sometimes not.
Also, there is an issue with filtering - sometimes it shown only filtered values, sometimes - filtered+all the rest values in the DB.
I checked in the chrome developer tools and here's what I saw. I just opened the screen and haven't done any scrolling. This request with "skip=0&limit=20..." - it's when I tried to refresh data. And all these requests goes all the time until the last page of the data.
Is this my problem with something or is it some infinite scroll issue?
For testing, In this GridView I turned off the infinite scroll and sorting/filtering worked great. But the loading widget didn't appear on data refreshing for some reason.
Please advise what can I do with it? Is it possible to do something to make infinite scroll work as expected?