bug: `ion-tabs` routing between tabs is slow

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

[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

[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.