CODEWITHSUNDEEP
angularionic-frameworkionic4
Rahul Pamnani
Rahul Pamnani

Reputation: 1435

How to run the loader until the response is fetched from the API in Ionic 4

I am working in my Ionic 4 app and I am fetching the response from the API. I have also added the loader to the front page in which the response is coming from the API.

I want to run the loader until the response is not fetched from the API.

This is my tab1.page.ts:

import { Component, OnInit } from '@angular/core';
import { ChakapiService } from './../service/chakapi.service';
import { LoadingController, Events } from '@ionic/angular';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})

export class Tab1Page implements OnInit {
  detu: any;
  newda: any;
  constructor(public chakapi: ChakapiService, public loadingController: LoadingController, public events: Events,
    private storage: Storage) {
    this.detailsfetch('en');
  }
  ngOnInit() {
  }
  async detailsfetch($langselect) {
    const loading = await this.loadingController.create({
      message: 'Please Wait',
      duration: 2200,
      translucent: true,
    });
    await loading.present();
    this.chakapi.getdetails($langselect).subscribe(data => {
      this.detu = data;
      this.newda = this.detu.data;
    });
    return await loading.onDidDismiss();
  }
}

In this I am fetching the response from the API and I have added the loader but the loader is running for a defined time.

I want to run the loader until the response is not fetched from the API.

Any help is much appreciated.

Upvotes: 1

Views: 2507

Answers (2)

Muhammad Ibrahim
Muhammad Ibrahim

Reputation: 31

Here is login example with try catch blocks with handles both successful and error cases of response. loader waits for response to come from server and stops if response received or some error occurred

async login() {
    console.log('login' + this.loginForm.get('username').value);
    try {
      const loading = await this.presentLoading(); // start loader
      const res = await this.authService.login({
        username: this.loginForm.get('username').value,
        password: this.loginForm.get('password').value
      });
      this.loadingController.dismiss();            // stop loader on successfull response
    } catch (error) {
      this.loadingController.dismiss();            // stop loader on some error
      if (error === 0) {
        this.presentToast('Invalid username password');
      } else {
        this.presentToast('Some Error Occured, Please try again');
      }
    }
  }

here is the loadinng method

  async presentLoading() {
    console.log('starting loading');
     const loading = await this.loadingController.create({
      spinner: 'circles',
      keyboardClose: true,
      message: 'Logging you in, Please Wait'
    });
    return await loading.present();
  }

Upvotes: 2

Nithya Rajan
Nithya Rajan

Reputation: 4884

Remove the duration property in the loader, and add loader.dismiss() inside the subscription of your server call

async detailsfetch($langselect) {
    const loading = await this.loadingController.create({
      message: 'Please Wait',
      translucent: true,
    });
    await loading.present();
    this.chakapi.getdetails($langselect).subscribe(data => {
      this.detu = data;
      this.newda = this.detu.data;
      loading.dismiss();
    }, error => { loading.dismiss(); });

  }

Upvotes: 6

Related Questions