Search code examples
angularionic-frameworkionic4auth-guard

Previous page image clear delay when routing to next page (Ionic 4)


BACKGROUND:
I have started to build an Ionic app for a fictitious law firm for general practice. Here is a link to my github repo: https://www.github.com/jamesslater/boutiquesolicitors

It starts with a login page which for now the only accepted credentials are -
Username: User
Password: 123

Once logging in, the app is routed towards 'members/dashboard'. I followed this tutorial for the angular routing flow: https://devdactic.com/ionic-4-login-angular/

THE PROBLEM:
After logging in, the page seems to transition in to load the next one, as if the content is sliding to the left. Whilst loading the dashboard, the ion-img element stays on the page for a brief second before disappearing. This looks really choppy and happens 100% of the time. I have no idea why it is doing this.

Here is a clip of the issue in action in a browser to give a better understanding: https://streamable.com/kpgwx

Any help is greatly appreciated. Thanks!


Solution

  • Yes, I tried to run app and saw issue. actually ionic4 library has some issues with navigation.

    Try this on dashboard.page.html.

    <div class="nav-wrapper" style="background: white;">