fix(react-router): remove page transition flicker on outlet mounting

[sean-perkins]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

On initial load, when using nested router outlets with React, another outlet can briefly display before the enter view & outlet has mounted.

Issue Number: #24666

What is the new behavior?

• Page transitions that are deferred as a result of the outlet not being rendered yet, happen immediately after the outlet is mounted.
• Add note about using a deprecated private API from react-router (computedMatch) that is no longer available in v6.
• Removes tabs attribute when cloning the page element
  • Cannot find a single reference to why we have this code. Looks like carry over from the Angular router integration, which also has no functional code tied to it.

Does this introduce a breaking change?

• Yes
• No

Other information

Before	After
Kapture.2022-01-26.at.19.45.15.mp4	Kapture.2022-01-26.at.20.01.10.mp4

Note: I am refreshing the browser in both examples.

[sean-perkins]

This may be redundant. Open to feedback for those that are more familiar with how React handles internal state changes.

[rgoldiez]

@sean-perkins - are you tossing routeInfo into state as a way to get another render so that pendingPageTransition can be evaluated? Would it be clearer to put pendingPageTransition into state (instead of an instance variable) and use it from state?

[liamdebeasi]

The componentOnReady helper may be of use here: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts#L70

[sean-perkins]

I was trying to maintain as much previous code behavior, of passing the context of routeInfo from the original function call, back when the function should be handled.

Although, I don't believe routeInfo can change between the time React component is first constructed and the first render cycle. So I believe the setState is just re-assigning the same value and can be removed. I did brief testing of removing that call and tests passed and behavior seemed appropriate.

The important piece is just catching when a page transition happens on a component that hasn't mounted (typically from routing directly to a view in a nested outlet) and re-handling that when the component is available.

[sean-perkins]

I don't believe componentOnReady will be applicable here. The most common state of this happening, was when routerOutlet (the element ref) was undefined.

From testing, it does not appear to be needed in the componentDidUpdate life cycle 👍