Show loading on load http.get

Ionic Framework ionic-v3
1

Hi, as the title…

how do I show loading / spinner and close it after my http.get request is complete?

I have search and found this https://github.com/driftyco/ionic-site/issues/531

but it will only show and hide the loading/spinner with a setTimeout().

2 Likes
2

Can try, something like this:

let loading = Loading.create({content:'My message'});
nav.present(loading); //nav instance of NavController

http.get('http://myurl.com')
.subscribe(response=>{
loading.dismiss();
});
2 Likes
3

Here’s a more complete example,

import {Page, Loading, NavController} from 'ionic-angular';
import {DataService} from '../../providers/data-service/data-service';

@Page({
  templateUrl: 'build/pages/home/home.html',
  providers: [DataService]
})
export class HomePage {
  public people;
  public loading = Loading.create();
  constructor(
    public data: DataService,
    public nav: NavController
  ) {
    this.nav.present(this.loading);
    this.data.load().subscribe(
      res => this.people = res.results,
      err => console.warn(err),
      () => {

        this.loading.dismiss()

      }
    )
  }
}
12 Likes
4

Thank you @mhartington @mauricionarcizo
This solution improve my UX!

1 Like
5

I just tried the Loading component, and I´m getting

browser_adapter.ts:73 TypeError: Cannot read property 'nativeElement' of undefined
    at new LoadingMdPopOut (http://localhost:8100/build/js/app.bundle.js:48166:40)
    at Function.Transition.createTransition (http://localhost:8100/build/js/app.bundle.js:68127:16)
    at http://localhost:8100/build/js/app.bundle.js:50623:58
    at ZoneDelegate.invoke (http://localhost:8100/build/js/angular2-polyfills.js:390:29)
    at Zone.run (http://localhost:8100/build/js/angular2-polyfills.js:283:44)
    at NgZoneImpl.runOuter (http://localhost:8100/build/js/app.bundle.js:29001:71)
    at NgZone.runOutsideAngular (http://localhost:8100/build/js/app.bundle.js:28919:80)
    at Portal.NavController._beforeTrans (http://localhost:8100/build/js/app.bundle.js:50613:20)
    at Portal.NavController._postRender (http://localhost:8100/build/js/app.bundle.js:50595:14)
    at Portal.NavController._render (http://localhost:8100/build/js/app.bundle.js:50511:18)
  -------------   Elapsed: 74 ms; At: Tue Apr 26 2016 16:58:57 GMT-0300 (ART)   -------------  
    at Object.Zone.longStackTraceZoneSpec.onScheduleTask (http://localhost:8100/build/js/angular2-polyfills.js:1413:23)```
6

Hi!
I trying do this with Beta.11 and its not working, can you help me?

Thank you!

7

@vsecco

there are a few changes in beta 11 – see changelog

change:

import {Loading } from 'ionic-angular';

to

import { LoadingController } from 'ionic-angular';

add it to your constructor:

public loadingController: LoadingController

and call it:

let loader = this.loadingController.create({
      content: "your message"
    });  
loader.present();
9 Likes
9

Hi, thanks it works when using in Component directly. But if I want to intercept in service Http - it shows: Cannot read property ‘create’ of undefined. So it is stopping on let loader = this.loadingController.create({
content: “your message”
});
loader.present();

I am extending Http with my custom HttpService, where in Appmodule I also implement:

providers: [MessagesData,UserData,Storage,CustomersData,{
provide: HttpService,
useFactory: (backend: XHRBackend, options: RequestOptions) => {
return new HttpService(backend, options);
},
deps: [XHRBackend, RequestOptions]
}]

Does anyone have Idea, why it is not creating Loading?

1 Like
10

Services should not be interacting with the view layer. Don’t try to interact with a LoadingController from a service. I also think it’s better to wrap Http using composition instead of inheritance.

1 Like
11

Ok I understand. Thanks. So what would be recommended way to “not to repeat” every time LoaderController creation code? But to attach to every http request?

12

That’s a pretty open-ended question that’s hard to answer in a general way. Sometimes I want it to be done as the page is becoming active, sometimes I want it as part of an explicit refresh action, sometimes I just don’t care to present it to the user and just let network activity happen in the background. There are a lot of different situations in which you might want to present a loading spinner, and it probably won’t always be the same in all your pages, which is another reason to get it out of the service.

13

@fathermonkey: if you dismiss a loading object, it’s destroyed. Presenting it back will result in an error (the error you mentioned earlier).
It’s better to create the loading object each time you need it :
Instead of
this.loading.present();

Use this.myLoadingPresent();

Then

myLoadingPresent() {
this.loading = this.loadingController.create({
content: ‘Loading… Please wait.’
});
this.loading.present();
}

1 Like
14

Hello there ;

This is my component.ts
import { Component } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;
import {Deneme} from ‘…/…/providers/deneme’;
import { Http,Response } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;
import { LoadingController } from ‘ionic-angular’;

/*
Generated class for the Dic page.

See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({

templateUrl: ‘dic.html’,
providers:[Deneme]

})
export class DicPage {

veri:any=null;

constructor(public navCtrl: NavController, public navParams: NavParams,public den:Deneme,public http:Http,public load:LoadingController) {

}
ionViewDidEnter(){

let loaddd = this.load.create({
content: ‘Please wait…’
});

loaddd.present();
this.den.loading().subscribe(data => {this.veri=data},err => console.log(err),()=>{loaddd.dismiss()});
console.log(this.veri)
}

I see veri variable is null at console.However if i do this

this.den.loading().subscribe(data => {console.log(data)},err => console.log(err),()=>{loaddd.dismiss()});

I can see my Json data at console !!!
I dont really understand Can you Help me

Thank you in Advance

15

Try console.log(JSON.stringify(this.veri));

16

thanks a a lot my friend for ur contrubiton

17

Hi, I am very much new to ionic2 can you please explain what is this
…/…/providers/data-service/data-service? what type of providers you use means exactly what we have to place in providers folder and how you get this data-service? Or can you share your full project with all this folders.

18

thanks @fishgrind this works for me :+1: :slight_smile:

1 Like