bug: react, transitioning tabs page away hides tab page before transition finishes

[milanharia]

Prerequisites

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

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

When routing from a tab page to a non-tab page, the active tab state of the tab bar is lost which sets the .ion-page-hidden class to the IonPage which applies display: none to it. This causes the page to be hidden whilst the new page is transitioning over the tab page which causes it so appear like it is unmounting.

Expected Behavior

If a page that is not part of the tab ion-router-outlet is being routed to, the .ion-page-hidden class should be delayed until the page transition has completed. The class may need to tweaked as the z-index style may still need to be applied.

Steps to Reproduce

Transition from a page that is in an ion-router-outlet that is wrapped in ion-tabs to a page that is not (that does not have a tab bar). You will see the tab page go blank (display: none) as the page transition is playing.

https://user-images.githubusercontent.com/76167627/173867260-eac42e1f-d12d-43bd-be2e-38f816078b36.mov

Code Reproduction URL

https://github.com/milanharia/ionic-react-tab-navigation

Ionic Info

Ionic:

Ionic CLI : 6.19.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 6.1.10

Capacitor:

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

Utility:

cordova-res : not installed globally native-run : 1.6.0

System:

NodeJS : v16.14.2 (/usr/local/bin/node) npm : 8.7.0 OS : macOS Monterey

Additional Information

No response