Setting initial page

Ionic Framework ionic-v3
1

I’m getting a side effect from conditionally setting the rootpage.
[edit] after investigating, the problem exists without the if statement.

see video at 27 seconds. Top left of screen:

@App({
    template: `
    <ion-nav *ngIf="rootPage" swipeBackEnabled="true" id="nav" #content [root]="rootPage"></ion-nav>
  `,
    config: {}, // http://ionicframework.com/docs/v2/api/config/Config/
    providers: []
})
export class MyApp implements OnInit, OnDestroy {
    rootPage: any = HomePage;

    constructor(
        private app: IonicApp,
        private platform: Platform,
        private auth: AuthService
    ) {
        if (this.auth.authenticated()) {
            this.rootPage = HomePage;
        } else {
            this.rootPage = LoginPage;
        }
    }
}
2

I am interested in a solution for this. I have the same problem. The styling of the app loads a second to late. I am seeing my html components without any styling for like a second.

I don’t set the rootpage conditionally though. It just happens when the app starts.

3

Try setting the rootPage to null initially:

export class MyApp implements OnInit, OnDestroy {
    rootPage: any = null;
4

I have the same issue and have had for a number of weeks. As you mentioned, UI elements are loaded and then it seems the styles are applied after. No more than 1s, but still, it looks unprofessional