Faster List Performance with Ionic Virtual Scroll & Infinite Scroll [v4]

ionic-4-list-performance

If you are working with huge amounts of data, you might have experienced performance problem with the standard Ionic list and your items.

For especially that case there are 2 components that we can use to improve our list performance and get better results, which are the infinite scroll and the virtual scroll.

We will discuss both of them in this Quick Win!

Setup our Scrolling App

Before getting started with the actual patterns we need a dummy app which you can start like:

Also, we will make API calls later for our data so make sure you import the HttpClient to your app.module.ts like:

Besides that everything we need is already included in the Ionic package!

Implementing Ionic Infinite Scroll

Infinite scroll describes a list which can be scrolled down (or up) all the time while adding new items. Whenever we reach the end of our current loaded list, a function will be triggered and new items can be added to the list.

This means, the infinite scroll is great for pagination.

If your api returns a number of items plus a pages count you can always ask for more results on another page. A typical response might look like this:

In those situations the page parameter needs to be passed to the API, and we will build a little example with exactly that behaviour.

Inside the view of our app we need an iteration over an array of items. Nothing new so far, but below the list we add the ion-infinite-scroll component. This component will automatically detect when the user scrolls past a specified threshold from the bottom of the page and trigger the (ionInfinite) function that we can declare.

Additional you can also change the loading text, animation and also the position (top or bottom) of the infinite loading component.

Let’s get started by changing your home/home.html to:

Now we just need to make the according calls inside our page to get some data and fill our users array. We make use of the Randomuser API which actually also happens to allow pagination (yeaaah)!

The only thing you need to take care of is not overriding your users all the time, but adding the new array of results to the old entries solves the problem.

We can also talk to the infinite-scroll component through the event that is passed to our function. We can use this information to mark it as complete when the async operation is finished and also to disable it once we reach the end of the pagination!

Of course your pages logic may vary, but this would be an example how to increase your page of the results with each infinite loading call.

Open your home/home.ts and change it to:

The result now gives you this nice reloading effect.

ionic-4-infinite-scroll

When should I use Ionic Infinite Scroll?

If your API offers pagination for your results. You can make calls and receive a small bunch of results which helps to display data faster to the user. Whenever the user needs more data the call will be placed and again the result will be available faster as the response is smaller than if it would contain all results!

So if you can split up your API results and trigger the load of additional data, the infinite scroll is exactly what you need.

Implementing Ionic Virtual Scroll

The Ionic Virtual Scrolling list offers a special behaviour which you might know from native iOS development: The list takes a complete array of data but not all items are rendered immediately, only the ones the user can see and a few nearby. When the user starts scrolling, views will be reused and filled with information of the new rows.

For this pattern let’s start with the logic of our page. We don’t need the pages logic from before, but this time we should make an API call to get a massive result (you could also change 100 to 1000 here). So go ahead and change your home/home.ts one more time to:

As you can see, we get “all” results of the API. Actually 100 are not all here, but imagine this would be everything.

This means, we expect a huge response with potentially 100 rows of data. And this can be a lot more in the enterprise context as well!

If you would wrap all of those results into a simple ngFor list and call it a day you will regret it very soon as the performance will give you hell.

All cells and views of the list will be created and rendered, but you actually only need the few that the user can see!

We also add a sorting so the list is ordered alphabetically and then create a new header function upfront will will do something interesting: For each entry in the array of our virtual scroll this function will be called.

Whenever this function returns a value, a new “header” block (whatever that might be in the view) will be added to the list. In our case, we want to find out if the first character of the last name changed which means we can display a new list divider!

We can now wrap our results into the Virtual Scroll like this inside your home/home.html:

The header function is passed to the parent element and we create a divider based on the data of that function.

Also, it is recommended to no use the standard image tag inside the elements but the ion-img component.

ionic-4-virtual-scroll

The list items still hold pretty much the same information, but as they are wrapped inside the virtual scroll they will be reused efficiently.

When should I use Ionic Virtual Scroll?

If you API delivers huge amounts of data (big data) and you want to display all the data for the user. A regular list would have a poor performance, therefore use the virtual scroll if you have the full response at hand.

Conclusion

If your Ionic app suffers from slow lists these two approaches can potentially save your day. They don’t always match your API style so make sure you select the approach that fits your needs because both are a great way to improve your apps performance.

You can also find a video version of this Quick Win below.