Ionic 2 Newbie: Generate Page Content Before Actually Displaying The Page

I’m very new to Ionic 2 and trying to optimize a portion of my app. I wasn’t able to find anything on this topic but it may have been poor searching on my part. Basically, I have a drill-down type operation. I tap an item and it opens a list of about 900 items to choose from to start. It has a search bar at the top that filters the items as you type so the list gets smaller very quickly. The filtering works pretty well (a little sluggish sometimes but I have some thoughts on speeding this up). My question is about the initial display of the page. When I tap the item to display the page it takes about 3 seconds to open because it is rendering the page. This page is something that will be used over and over again and the initial list rarely changes so it would be nice if I could first, render this page off-screen before it is even needed, then pop it open when I need it. When I’m done with it, it would be nice to keep it around already rendered so I can pop it up quickly again. Not sure if this is even the correct way to think about this. Another thought is that if there is a way to display the page while it is still rendering, displaying what it has so far. That would also work fine as you initially see maybe 10 items and so the rest of it can just continue rendering without affecting the user experience.

Why don’t you create a JSON file and then load it from that?

That’s a good thought but my issue is not in acquiring the data. It actually only takes a few milliseconds to generate my list of data from my data store, but the slowness seems to be in the rendering of the data.

This sounds like a job for VirtualScroll.

1 Like

I came across InfiniteScroll and had already started looking at that. VirtualScroll should be even better since I have the complete list up front. Thank you for that excellent tip. Exactly what I needed.

Yo tuve el mismo problema y lo solucioné con VirtualScroll. :slight_smile:

1 Like

For the sake of anyone who encounters this post, I tried the VirtualScroll as it seemed most “natural” but I had rendering issues because my items are actually fairly customized and not standard list item elements. I am using an ion-grid for the layout instead of an ion-list. Rather than mess with the rendering, I ended up implementing InfiniteScroll solution based on the docs InfiniteScroll and it is working beautifully with no delay in displaying the page, scrolling is great, and does exactly what I need.

1 Like

Ahora tengo otro problema con VirtualScroll y es el lag cuando el listado tiene mas de 200 items.