How to put a loading function while the content is still being fetched from the api

Ionic Framework ionic-v3
1

I need a way to tell the user that content is being fetched and after the content has been fetched the loader to disappear

2

Easiest way is to use a property in the controller, then use an *ngIf in the view:

Controller

export class Page {
   this.loading = false;

   this.loadMore(){
       this.loading = true;
       service.loadMore().then(() => this.loading = false);
   }
}

View

<ion-content>
   <div *ngIf="loading">Loading...</div>
   <div *ngIf=!loading"> ... </div>
<ion-content>
3

I would argue even simpler than the previous advice would be to use the Ionic LoadingController.

2 Likes
4

What I do instead, is fake loading progression by putting in “empty state” styles…kind of like how Facebook and Google do. They’ll populate an item or two but fill them with squares where content will be.

Example