bug: react, custom elements build flicker when switching tabs

[milanharia]

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

When switching between tabs, for a split second a blank page loads and then the page mounts. Consequently, you can see a flashing effect as the content all appears from a blank page. This bug does not happen in beta 5.

Expected Behavior

I expect the tab switching to happen instantly as it does in previous versions. I do not expect a blank page to momentarily appear.

Steps to Reproduce

This issue occurs when you nest IonRouterOutlet's which is necessary when you want to only render the tab bar on certain pages (for example do not render on a login page).

Code Reproduction URL

https://github.com/milanharia/tab-flashing-effect

Ionic Info

Ionic:

Ionic CLI : 6.17.1 (/Users/milan/.nvm/versions/node/v14.17.6/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 6.0.0-rc.0

Capacitor:

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

Utility:

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

System:

NodeJS : v14.17.6 (/Users/milan/.nvm/versions/node/v14.17.6/bin/node)
npm : 7.24.2
OS : macOS Big Sur

Additional Information

Simulator.Screen.Recording.-.iPhone.12.-.2021-10-22.at.10.57.09.mp4

[liamdebeasi]

Thanks for the issue. Did you make your repo public? I cannot access it.

[milanharia]

Sorry, it should be public now.

[liamdebeasi]

Thanks, I can reproduce this behavior. I think this broke in c50d895.

[milanharia]

I am not sure if this is related to the same bug or not but the dismiss function from the useIonLoading hook does not dismiss the loader anymore.

E.g:

[present, dismiss] = useIonLoading()
<IonButton onClick{() => dismiss()}>Dismiss</IonButton>

[liamdebeasi]

Yep, good thing to note. That was fixed by 655631d and will be fixed in the next Ionic 6 RC.

[sean-perkins]

@milanharia following up on your issue, this appears to be related to the usage of nested IonRouterOutlet.

When using nested IonRouterOutlet it is encouraged to use the ionPage property on the nested outlet, to help the router better transition the pages: #20597 (comment)

If you update your example repository App.tsx to:

...
const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
      <IonTabs>
        <IonRouterOutlet ionPage>
        ...

You will no longer see the tab bar flicker when navigating between tabs.

[milanharia]

@sean-perkins I added that property as you said but then it causes further issues with the page transitions.

Simulator.Screen.Recording.-.iPhone.12.-.2021-11-30.at.17.30.01.mp4

[sean-perkins]

@milanharia thanks for getting back to us quickly.

With that change resolving the flickering of the tabs, I believe the new issue now overlaps with a few other known issues in the React router implementation.

#23013 (individual tab pages being destroyed)
#20219 (transitions)

& the transition issue can also be found here:

• https://stackoverflow.com/questions/67260072/react-ionic-tabs-nested-routes-animaci%C3%B3n-no-works

I'll have to consult with the team on when we want to slate reworking the routers.

In the interim, while not ideal, you can turn off animations just on the top-level outlet when navigating between Home and tabs.

[milanharia]

@sean-perkins Thanks for the response. I can turn off animations for the Home > Tabs navigation, however, this still leaves the issue of the tab pages flashing on tab switch. Also, I am under the understanding that this ionPage prop is meant for IonRouterOutlets that are rendered by a parent Route component:

App.tsx:

const App: React.FC = () => (
  <IonRouterOutlet>
    <Route path="/sub1" component={Sub1Outlet}  />
    <Route path="/sub2" component={Sub2Outlet} />
  </IonRouterOutlet>
);

Sub1Outlet.tsx:

const Sub1Outlet: React.FC = () =>  (
    <IonRouterOutlet ionPage>
      <Route path="/sub1" exact={true} 
        render={() => <Redirect to="/sub1/page" />} />
      <Route path="/sub1/page" component={Page1} exact={true} />
    </IonRouterOutlet>
  );

Sub2Outlet.tsx:

const Sub2Outlet: React.FC = () =>  (
    <IonRouterOutlet ionPage>
      <Route path="/sub2" exact={true} 
        render={() => <Redirect to="/sub2/page" />} />
      <Route path="/sub2/page" component={Page2} exact={true} />
    </IonRouterOutlet>
  );

[hellokingdom]

@liamdebeasi @sean-perkins With 6.0 being made final has this issue been rejected or does it depend on the work to rebuild routing?

Our app which is still in development flashes between each nested route change. We've added the ionPage prop which does stop the bottom tabs flickering but the rest of the IonPage flashes between route changes.

It would seem our only solution now is to drop the nested routes and manually handle hiding the tabs once logged in.

[liamdebeasi]

We are still interested in resolving this issue. The issue here seems to be a combination of quirks in Ionic React and some best practices not being followed in the sample app, but we'll take a closer look to get a better sense of what needs to change.

[milanharia]

@liamdebeasi is it not possible to revert whatever change broke the tab switching between Ionic6-beta5 and Ionic6-rc1 as a temporary solution? I feel this issue could impact a lot of people who are upgrading from Ionic5 to Ionic6. If you cannot do this, the workaround of only having one IonRouterOutlet and manually hiding the tab bar on the pages you do not want to see them should potentially be documented in the breaking changes.

[hellokingdom]

@liamdebeasi Thank you for the update, in the meantime I have merged our nested outlets and used state to hide and show the tabs when required.

[sean-perkins]

Hello everyone 👋 I'm still actively debugging this issue and can confirm that regardless of setting ionPage on the router outlet, this is still an issue that exists.

While tracing the issue, removing this line fixes the flickering issue between tab navigations:

ionic-framework/packages/react-router/src/ReactRouter/StackManager.tsx

Line 191 in a34ab42

enteringEl.classList.add('ion-page-invisible');

For some reason, when navigating between tabs when using nested outlets, the parent outlet is transitioning, even though the navigation is occurring in a child outlet inside of it (the parent outlet is already visible/active).

I'll need to discuss more with the team this week. I'm uncertain if the outlet should be even committing those changes when navigating between tabs. Likely this issue has existed for some time, but hasn't been a problem due to Stencil's hydration behavior.

[sean-perkins]

Hello everyone, I have an open PR that addresses this issue and improves the behavior of nested router outlets.

You can test with the dev build here:

npm i @ionic/react@6.0.5-dev.1643392037.29a4e7f @ionic/react-router@6.0.5-dev.1643392037.29a4e7f

I have confirmed the fix in both the reproduction app and the Ionic React conference app.

@milanharia when testing your reproduction app, you will need to address a breaking change in V6. In your index.tsx, import and call setupIonicReact.

import { setupIonicReact } from '@ionic/react';

setupIonicReact({});

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