I'm working on a mobile app that loads data from an API and displays it in a list view by sets. My API returns around 10,000 items in total, split across about 20 sets, each containing roughly 300 items. To manage this, I’ve added card_set_id (to filter items by set), limit_value, and offset_value as parameters to the API call.
In the app, I have a page that displays a list of sets. And all the item within that set. The API returns the data in a format that allows me to pass a set_id to the grid view, which then fetches all items for that set.
The problem: Currently, loading all sets and their items at once causes the app to crash due to the large data volume. My idea was to implement infinite scroll – first on the list view, so sets load one by one as I scroll, and then in the grid view to load items 15 at a time.
However, despite trying different approaches, I'm still struggling to get this working correctly. The API keeps returning all data at once, and I'm unsure how to properly implement infinite scroll for both the sets and their items.
Any advice on how to structure this for smoother loading would be greatly appreciated!
[
{
"set_id": "STORE13",
"set_name": "New Set",
"id": "36547abd-0b75-4c85-971a-d04f63b19d0e"
}
]