bug: ion-tabs routing between tabs is slow

[Livijn]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Switching between tabs is slow (500ms+) when using my app on my iOS device. This results in a laggy feel which is not desired. It works great on my desktop in both Safari and Chrome.

I have just started with this app so there isn't a lot going on in the tabs. How can I debug this further to see why it's taking so long?

Expected Behavior

It should feel more snappy.

Steps to Reproduce

Switch between tabs.

Code Reproduction URL

https://github.com/Livijn/lag-tester

Ionic Info

Ionic:

   Ionic CLI       : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 6.0.0-rc.3

Capacitor:

   Capacitor CLI      : 3.3.2
   @capacitor/android : not installed
   @capacitor/core    : 3.3.2
   @capacitor/ios     : 3.3.2

Utility:

   cordova-res (update available: 0.15.4) : 0.15.3
   native-run                             : 1.5.0

System:

   NodeJS : v16.1.0 (/usr/local/Cellar/node/16.1.0/bin/node)
   npm    : 7.11.2
   OS     : macOS Monterey

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[Livijn]

I added a repo that you can try. When I run that on my iPhone 12 Pro with iOS 15.1.1 it takes like 500ms to switch tabs. It's the same for my colleagues.

[sean-perkins]

@Livijn thanks for the reproduction! Would you be able to screen record what you are seeing on device as well? I cannot visually discern the difference on device navigating between tabs. There is a slight delay with the request of 10 background images instead of lazy loading, but nothing too significant.

For comparison, here's what I'm seeing currently on iPhone XS Max (iOS 15.1.0):

Your application v6 (highlighting the Tab 1 to Tab 2 transition):

Your application v5.9.1 (highlighting the Tab 1 to Tab 2 transition):

I wouldn't be too concerned with the differences between yours & I's images, as your device has more computing power.

[Livijn]

I added the images just as placeholders so the tabs aren't empty. It's also slow on subsequent requests (when images are already loaded).

It seems like it takes 500ms for you as well to change the tabs. If you compare that to i.e. Instagram there is a big difference in the feel. I have an app developed with @ionic/vue 0.0.9 using my own tab/router implementation since there wasn't any back then. That old app is as fast as Instagram, but with a lot more content.

[Livijn]

Upload.from.GitHub.for.iOS.MOV

[sean-perkins]

@Livijn thanks for the added context. Instagram definitely has a more responsive feel with the tab changes.

This issue may relate to another issue (#24337 discussion) I'm currently exploring where the Vue Router implementation for tabs is unmounting the tab when you navigate between tabs, when it shouldn't.

Regardless, I agree the time/interaction between tab transitions should be just as snappy as Instagram feels.

[hellokingdom]

@sean-perkins @Livijn I wanted to chip in here that I an in the process of producing a repo to identify the same issue.

What I have tested is switching routes with a setInterval to remove any possible touch/input delay. Doing so demonstrates that Ionic is capable of rendering the tabbed pages extremely quickly. On an iPhone XR I can toggle between each tab in a few milliseconds.

Changing routes via a tap on the tabs adds a considerable delay. I have also demonstrated the delay is reduced when the change is triggered via an IonButton within the tab content.

On my Android device i can toggle between tabs nearly instantly and alternate between each tab without delay. On an iPhone XR with considerably better JS performance it's not possible to replicate the same tab switching performance.

Note: My experience relates to Ionic React

[liamdebeasi]

Hello, @Livijn! I am looking into this issue and had a follow up question for you. Does this issue only happen when you visit a tab for the first time, or does it happen every time you visit a tab?

The reason I ask is the first time you access a tab there will be an overhead cost of creating and rendering the component. Subsequent visits to the tab should be much faster.

[treighmawaka]

@liamdebeasi what you described is exactly what I'm noticing on a Vue app I'm working on. There's a considerable delay on first load, but subsequent tab switches tend to execute much faster. This issue gets worse, perception-wise, if you add data fetching to the mix.

[liamdebeasi]

Hi everyone,

I dug into this a bit more and have identified some code that could be causing this:

1. Unnecessary RAFs

This code was added as a workaround for a quirk in the v5 version of Ionic with lazy loaded components. It resulted in Ionic Vue waiting several milliseconds before proceeding with the transition. v6 does not use lazy loaded components, so this is not needed.

2. Unnecessary waits

This code was added in the early days of Ionic v4 to work around a quirk in Ionic with lazy loaded components, similar to the workaround above. It causes Ionic to wait for every Ionic component to be ready before proceeding with a transition. This was done even when switching to tabs that have already been initialized, causing more work to be done. v6 does not use lazy loaded components, so this is not needed.

---

I did a (very unscientific) test of befored an after results on my iPhone 11. This is the process I followed:

1. Load on Tab 1.
2. Tap the Tab 2 button. Make note of the time difference between ionViewWillEnter and ionViewDidEnter.
3. Tap the Tab 3 button.
4. Tap the Tab 2 button. Make note of the time difference between ionViewWillEnter and ionViewDidEnter.

Pre-Optimization

Test Run	Initial Load (ms)	Subsequent Navigation (ms)
1	101	98
2	93	73
3	81	61
4	106	64
5	108	54
Avg	97.8	70

Post-Optimization

Test Run	Initial Load (ms)	Subsequent Navigation (ms)
1	25	14
2	30	13
3	21	16
4	23	16
5	18	17
Avg	23.4	15.2

There is a significant reduction in processing time post-optimization. Note that I only measured the amount of work that Ionic is doing. There is still processing that Vue and Vue Router are both doing.

---

Given that these changes impact transitions, a big piece of Ionic, I would prefer to make these changes during an upcoming major release's beta period. This allows us several months of community testing in order to catch bugs.

I will update this thread when I have more to share regarding this issue. Thanks!

[tarasmelnychuk]

Thanks, @liamdebeasi ! Indeed removing the parts of code you mentioned makes tabs navigation faster.

For those who need it right now, you can use these forks
https://www.npmjs.com/package/ionic-lpn-vue
https://www.npmjs.com/package/ionic-lpn-vue-router

[liamdebeasi]

That's great to hear. These changes should also positively impact the modal and popover animations. Let me know if you notice any flickering with page transitions as well as modal/popover animations.

[nshejteri]

Few weeks ago I made some changes to make it faster. You can check on this branch:

https://github.com/nshejteri/ionic-framework/tree/router-outlet-performance

It works significantly faster but I think it can be even better but I did not have time...

[sandrodz]

Few weeks ago I made some changes to make it faster. You can check on this branch:

https://github.com/nshejteri/ionic-framework/tree/router-outlet-performance

It works significantly faster but I think it can be even better but I did not have time...

Why didn't you make a pull request?

[nshejteri]

I wanted to fix some other things and make the switching tabs even better and also do some more testing but I had to change focus on other things so did not have time to complete all this and then make the pull request.

[liamdebeasi]

Hi everyone,

I have a dev build with proposed changes which should reduce the delay when switching between tabs, opening modals/popovers, and pushing pages.

6.3.3-dev.11667243510.13b3ee07

Please note that this is an Ionic 7 build and is subject to the Ionic 7 Breaking Changes.

These optimizations only apply to Ionic Vue, Ionic React, and Ionic Core consumers (who are importing from @ionic/core/components). There are some other updates we need to make to Ionic Angular before that package can take advantage of these optimizations.

[liamdebeasi]

Thanks for the issue. This has been resolved via #26189, and a fix will be available in an upcoming major release of Ionic Framework. Please feel free to continue testing this dev build and let me know if you run into any issues.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.