Ionic2 tabs switching performance is very low

Ionic Framework ionic-v3
1

What is the best practice for loading data in ionic tabs?

It takes too much time to actually switch to another tab in iphone5.
(iphone5s and newer are much faster)
It feels like it is waiting until the full content of the tab is rendered and then it redirects you to it.

My idea was to have in every tab ionWillLoad(){ this.loading = true} and then somewhere in ‘ionDidEnter(){this.loading= false}’.
This way it would switch to the tab before rendering the whole content.
However the lifecicles on iphone doesnt work similar way as in browser.

Maybe you have any ideas what is the best practice to speed up switching between tabs?

1 Like
2

Great question, I have been running into a similar issue with certain tabs even with a newer phone. Having tabs that are slow is a real dealbreaker from a UX perspective.

I would love to hear some best practices around this. The one tab I have that is significantly slower has multiple elements in a list, so I used virtualScroll, but that did not speed up tab switching.

1 Like
3

I have the same issue even in iphone6.
My first tab has a contacts list，400 items. Other tabs has nothing. It takes too much time to switch to the other tab and the content shows blackscreen for a short while.

4

Did you mean:

ionViewDidLoad() {  }

?

i would try:

ionViewDidEnter() {
  this.entered = true;
}

ionViewWillLeave() {
  this.entered = false;
}

and you hide/show the content if leaving or entered

5

I think the issue here is the ionic built tabs implementation destroys and rebuilds the view everytime it switches tabs. Not a specific implementation. Once you load a tab once (with aot compile this still shouldnt be an issue), it should at least populate the view on time.

Edit: While doing some research, I have found that when switching tabs, the lifecycle event ngOnDestroy does not get called. Therefore, when switching I am interested to hear what event is significantly slowing down the process. It seems like the content gets rerendered evertime though…

6

Maybe this commit (11/28) will help you:

improve tab switching response: https://github.com/driftyco/ionic/commit/907191bbc2b669cc41a6f426091cca2131808508

1 Like
7

I think ionViewDidEnter fires before content is rendered