Ionic Infinite Scroll and API pagination
What is Infinite Scroll?
If you got here, I’m sure you already know what Infinite Scroll is, but as a polite Medium author I indeed will explain it. Infinite Scroll is a technique mostly used at social networking sites lowering the interaction cost in relation to paginated pages, in other words, users navigates over a massive chunk of content instead of content divided on smaller chunks. For instance, Facebook, Twitter and Instagram uses that technique to engage their users to spend more time using theirs apps due to the lower on interaction cost, which is the sum of efforts — mental and physical — that the users must deploy in interacting with a site in order to reach their goals.
How Infinite Scroll is implemented on Ionic?
Just to make clear, I’m using Ionic on its version 4, not 3, to justify that addendum, Ionic 3 and 4 have some tiny differences between their Infinite Scroll documentation, so, if you’re using Ionic 3, maybe this article will not solve your problem. Without further ado, the Ionic Infinite Scroll template element iterates over a list of elements defined immediately before that. Like that:
Now that you took a quick look at the code, I'll explain some unknown elements from the snippet, first, the threshold property and ionInfinite event, both are related, the threshold defines a distance from the bottom of content to trigger the event, hence when the user scrolls 100px from the bottom of the page, loadData($event) property will be called (p.s.: threshold could be defined as percent too, like 10%). In short, ionInfinite is relying on the threshold definition to defines when it triggers, by default, threshold is 15%.
Ok, now you understand how ionInfinite works, but what's inside loadEvent method?
Mostly, it adds 4 to 'slice' component property and calls complete() method which is called when all your operation is over, the adding to 'slice' is there just to show items in groups of 4 pokemons at the scroll beginning and, then, increasing, 4 at a time. Slice techniques are quiet necessary in almost all cases, because you push down the first loading payload, just find whose slice's initial value is yours.
That works on a single array of items, don't it? But how to manage an array which is paginated on the Rest API, what to do?
Implementing pagination to Scroll
When you are dealing with a Rest API which paginates all of their endpoints that return arrays, like Woocommerce API for example, you'll need an extra layer of logic on your loadData method, as simple as it can gets.
Essentially, you'll need to bring a 'page' property to component that adds 1 every time 'slice' value is getting closer to the pokemons array end, and next, calling the getPokemons() method with the page number of next page wanted. I treat getPokemons() as a synchronous method, as a matter of fact, you'll probably dealing with asynchronous one, primarily, the main difference between both is with async data, you'll only append next page value when it's ready.
Conclusion
It's not that hard to make an Infinite Scroll in Ionic, just make sure you have an element that iterates over target array and spot the ideal 'slice' initial value on your application.
A good hint for beginners, if you're using images inside each ion-item, please, use ion-img instead of just img. The ion-img component already implements lazyload under the hood, meaning your app will probably become more fluid and lighter.
