perf(many): reduce delay when performing overlay or page transitions

[liamdebeasi]

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)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• 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?

Issue URL: resolves #24346

Prior to Ionic adopting dist-custom-elements bundle, everything use the lazy loaded bundle. This meant that there was a brief period in between when a component was requested and when the component assets were loaded/registered/rendered where the component would show up blank or without styles. To mitigate this, previous maintainers introduced the deepReady function that looked for every child Stencil component and waited for each component's componentOnReady method to resolve. Once those all resolved, this meant that all the components were loaded and whatever pending operations could proceed.

Now that some parts of Ionic adopted the dist-custom-elements bundle, this is no longer needed and is causing unnecessary delays when opening modals, switching tabs, and more.

Additionally, a workaround was added to Ionic Vue to account for this same lazy loaded issue. Specifically, this was added to address layout shift issues in the old lazy loaded version of Ionic Vue: #22052. Now that Ionic Vue uses dist-custom-elements, this was causing unnecessary delays.

What is the new behavior?

• Modal and popover now only call deepReady when running in a lazy loaded environment. (For now this is non-CE build core and Ionic Angular).
• The JS Framework integrations no longer set deepWait. Whether or not deepWait should be true is now determined by the hasLazyBuild function in @ionic/core.
• The shallowReady function has been removed. This function was never getting called since all 3 framework integrations previously forced deepWait to be true.
• The additional requestAnimationFrame calls in Ionic Vue's transition function have been removed.

Note: Once Ionic Angular is updated to use dist-custom-elements, Ionic Angular devs will automatically get this perf boost.

Does this introduce a breaking change?

• Yes
• No

Other information

The video below shows that there are no layout shifts after removing the two requestAnimationFrame calls. This was tested on a Samsung Galaxy S6.

tab-switch-vue-android.mp4

The table below shows some rough benchmarks for how much tab switches will speed up by. These tests were conducted using https://github.com/Livijn/lag-tester. I placed onIonViewWillEnter and onIonViewDidEnter hooks in the setup function for Tab2 and used performance.now() to measure the time between when each hook was run. This allowed me to only measure the work that Ionic was doing.

Values were rounded to the nearest tenth of a millisecond. These tests were conducted on a Samsung Galaxy S6.

Switching from Tab 1 to Tab 2 for the first time

Test Run	main	FW-406
1	111.7ms	38.0ms
2	108.1ms	37.8ms
3	110.6ms	36.5ms
4	110.1ms	36.5ms
5	105.0ms	37.6ms
Average	109.1ms	37.3ms

Switching from Tab 1 to Tab 2 after Tab 2 has already been visited

Test Run	main	FW-406
1	82.8ms	33.0ms
2	82.2ms	28.2ms
3	73.5ms	38.2ms
4	76.2ms	26.9ms
5	71.2ms	24.5ms
Average	77.2ms	30.2ms