bug: ion-nav behavior with slow networks or network errors

[cjorasch]

Bug Report

Ionic version:
[x] 5.0.7

Current behavior:

If the user is working over a slow network with long latency then<ion-nav> can result in several problems related to network latency or failures.

This bug is related to the usage of Ionic in a web application.

Network latency:

If using a slow network (e.g. simulated Slow 3G) there are a number of issues with navigation. For example, here is the time to load a simple page component:

- 2 seconds to load entry.js file for component being rendered
- 2 seconds for import dependencies for that component
- 2 seconds for a child component entry.js file to load
- 2 seconds for child component dependencies to load
- 8 seconds elapsed before anything is displayed to the user

This example is a very simple component with only a single child component being rendered. Complex pages with component hierarchies can result in even more round trips to the server.

Issues include:

• There is no visual cue that anything is in progress.
• The user is still able to interact with the base page so they can keep clicking on other navigation items which can then get stacked on top when they eventually appear
• The user is still able to click things like the Back button which can be very confusing when things start popping up after a delay.
• Async logic in componentWillLoad can further block the rendering

Network errors:

If there are network errors then the problems are very severe. For example if there is an error loading the entry.js file for the component to be displayed.

• When you click on an element that attempts to navigate the url changes but nothing is rendered
• After this error all other navigation elements do not work. The url keeps getting updated but nothing is displayed (even if they would use other components that are already loaded).
• If the network connection is restored then navigation still does not work. Back button and nav links still just update the url but do not render anything.
• The user must click the Refresh button to get the app working again. This is especially problematic for PWA usage.

Desired behavior:

Slow networks:

• navigation should render pages in an "in progress" state if loading takes too long. There should be able ability to render a page as a loading Indicator or message

Network errors:

• navigation should not stop working if there is a network error

Steps to reproduce:

See #21045 for simulating slow networks or network failure.

The problems appear to exist for any Ionic based web application.

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of #21045 (While the components are different, the underlying behavior is the same).

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