Active tabs performance problem? Ionic 2


#1

Does anyone have any idea how to solve this problem?

The view from the tab is being loaded but the tab icon itself lags and doesn’t switch to be active. Any help or ideas would be highly appreciated, thanks!


#2

No one has any idea?


#3

I haven’t seen this problem before when using tabs. Can you reproduce on an actual device? Might be an emulator problem. Could you try and reproduce in a plunker or share your tabs code? Are you doing anything special in the <ion-tab> tag?


#4

@plmetz Thanks for your reply. I have tried on actual device, and it still is the same…

Here’s my tabs code

    <ion-tabs selectedIndex="2">
      <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
     <ion-tab [root]="tab2Root"  tabTitle="Users" tabIcon="globe"></ion-tab> 
      <ion-tab [root]="tab3Root" tabTitle="Profile" [rootParams]="acToken" tabIcon="contact"></ion-tab>
     <ion-tab [root]="tab4Root" tabTitle="Chat" tabIcon="chatbubbles"></ion-tab> 
      <ion-tab [root]="tab5Root"  tabTitle="Favourites" tabIcon="heart"></ion-tab> 
    </ion-tabs>

export class TabsPage {

tab1Root: any ;
  tab2Root: any ;
  tab3Root: any ;
  tab4Root: any ;
  tab5Root: any ;

  constructor() {

  this.tab1Root= WelcomePage;
  this.tab2Root = CountriesPage;
  this.tab3Root = HomePage;
  this.tab4Root = "";
  this.tab5Root = FavouritesPage;
  }
}

#5

Are you getting any console errors when this happens? Your code does look alright with the exception of tab4root not having a page. Shouldn’t effect the tabs but might want to assign that to a page just to make sure.

Also just noting that your posted code has a selectedIndex="2" which should be the Profile tab but in your video it appears to be starting on the Users tab. Might just be a transcription error but if that is the case in your code it might be a bigger issue.


#6

Thanks again, Nop I’m not getting any errors… Well in the video I have had a different starting index since I’m trying different scenarios to know where does the problem come from. I have also tried commenting out tab4 and trying but still faced the same issue. It appears to me like the app is maybe too heavy which results in UI not being updated… But I don’t know how could that be fixed


#7

Can you try a production build and see if it still exists? Otherwise I suggest opening an issue on the ionic github repo if you can reproduce it.