Loading Controller works only when set at timeout


#1

Hello I need help with loading Controller

I am using woocommerce plugin to display products on ionic home page.
I’m not able to set loading controller when the app loads up, loading the product. I can set loading to show up only with ‘setTimeout’ . I want to show loading till the page view loads completely. With setTimeout loading dismisses at the set interval. So sometimes it causes the page to show up blank till view loads completely.
here is my code

       import { IonicPage, NavController, LoadingController,Platform, App } from 'ionic-angular';
       import * as WC from 'woocommerce-api';

       constructor(public navCtrl: NavController, public loadingCtrl: LoadingController, 
          private platform: Platform,
          private app: App) {

      this.WooCommerce = WC({

        url: "http://www.j*******",
        consumerKey: "ck_365490*****",
        consumerSecret: "cs_b67f69******"

      });

        this.WooCommerce.getAsync("products").then( (data) => {
        console.log(JSON.parse(data.body));
        this.products = JSON.parse(data.body).products;
      }, (err) => {
        console.log(err)
      });

      let loading = this.loadingCtrl.create({
        spinner: 'dots',
      });
      loading.present();
      setTimeout(() => {
        loading.dismiss();
      }, 3000);


   }

I want to show loading till the page view loads up completely
Thanks


#2

That doesn’t seem to match what your code says. Your code is using setTimeout() to dismiss the spinner, not present it. Why don’t you dismiss the spinner inside the then block once your products have arrived?


#3

Thank You . So grateful to you :grinning:


#4

Hi

I would say it may not be smart at all to do view related actions in a constructor, but only after ionViewDidEnter.

This to avoid unpredictable behavior in various devices.

Rgdz

Tom


#5

Do you mean i should put this code in ionViewDidEnter?


#6

Hi

If I would expect UI actions directly responding out of it, yes I would.

Regards

Tom


#7

And to give you an example where I went wrong: I put and Alert in the constructor which showed in the browser, but failed to show in Ionic View. Resolved that obe by putting it in the appropriate lifecycle hook.


#8

Thanks I will do that then