CODEWITHSUNDEEP
ionic-frameworkionic3ionic4
Kravitz
Kravitz

Reputation: 2859

Ionic 4 loading component changes from v3

I'm trying to refactor this function for ionic 4. Trouble is half of these imports don't exist any longer. Has anyone got any idea where OverlayBaseController, Loading are now in v4?

import {ToastController, LoadingController, OverlayBaseController, Loading } from "ionic-angular"

/**
 * Wraps an asynchronous call with the LoadingController overlay
 * @param action the action to execute
 * @param loadingMessage the loading message to display
 * @returns {Promise<T>}
 */
async loading<T>(action: Promise<T>, loadingMessage?: string): Promise<T> {
    // Delay showing the loading spinner for 0.4s
    // See http://yuiblog.com/blog/2010/11/11/improving-perceived-site-performance-with-spinners/
    // Hopefully delay is re-implemented. See https://github.com/ionic-team/ionic/pull/11583
    let loadingOptions: OverlayBaseController = {} // delay: 400
    if (loadingMessage)
        loadingOptions.content = loadingMessage
    let loader: Loading = await this.loadingCtrl.create(loadingOptions)
        await loader.present().catch(this.log.warn)
    try {
        let result: T = await action
        loader.dismiss()
        return result
    } catch (e) {
        loader.dismiss()
        throw e
    }
}

Upvotes: 0

Views: 742

Answers (1)

Phonolog
Phonolog

Reputation: 6511

What about the following? I've used the docs as a reference, there seems to no need to use OverlayBaseController or Loading. 

import { LoadingController } from '@ionic/angular';

async loading<T>(action: Promise<T>, loadingMessage?: string): Promise<T> {
    const loader = await this.loadingCtrl.create({
      message: loadingMessage
    });
    await loader.present().catch(this.log.warn);
    try {
      const result: T = await action;
      loader.dismiss();
      return result;
    } catch (e) {
      loader.dismiss();
      throw e;
    }
  }

I removed the comment about the delay. The comment seems obsolete and confusing as there is no option to delay a loading screen...

I also went from let to const whenever possible, but this shouldn't harm the functionality.

Also, it might be a good idea to handle the case if loadingMessage is undefined. Maybe you could show a generic message like Please wait... This could be done via a default parameter. Therefore you'd have to change the signature like so:

async loading<T>(action: Promise<T>, loadingMessage = 'Please wait ...'): Promise<T>

For more info on default parameters, you can also check out the Typescript docs.

Upvotes: 1

Related Questions