Page flickering when loading data

Ionic Framework ionic-v3
1

I have an ionic page where I’m loading data, and then passing said data through to multiple child components. So I don’t want to show the page if the data isn’t available, because there will be failing dependencies with the child components.

Here’s my if/else directive to load the actual page, and an error page when the data is missing -

<ion-content *ngIf="data; else errorPage" padding>

<ng-template #errorPage>
        <page-error></page-error>
</ng-template>

``

The problem is a life cycle question. I’m loading the data in ngOnInit, and it doesn’t become available yet, so the error page loads as the if directive hits the else clause first. Then the data loads, and my actual page loads. This creates a flickering effect - where it quickly shows my error page loading and disappearing before showing my actual page.

Is there a cleaner way to show my actual page without flickering to the error page?

2

I would rewrite the child components so that they are robust in the face of not-yet-loaded data, and therefore so is the main page. I would then only show the error condition when there is an actual error.

2 Likes