How to Create a Custom Loading Component in Ionic 2

Ionic 2 is still being developed, so naturally there are a few components missing that people are keen to get their hands on. One of those in particular is a loading service (aka a busy or waiting service). Although in general it is a bad idea to block a users interaction with the application, things should be done in the background allowing the user to continue using the application, sometimes it is necessary to force the user to wait before allowing interactions to continue.

A loading service is on the roadmap for Ionic 2, but it has been heavily requested and has just recently been bumped up in priority (it will now likely be included in the next release). Until then though, I’m going to show you how you can implement your own custom loading service in Ionic 2 – I’m sure Ionic’s final solution will be better, but in the mean time feel free to use this.

This is going to be a super quick tutorial, and much less in depth than my others because I’m writing this in response to a few requests for the custom loading component I created:

Just built a waiting / busy / loading component for #Ionic2 – who wants to see a tutorial on this? pic.twitter.com/ciN7RsuSdI

— Joshua Morony (@joshuamorony) March 8, 2016

Usually I take time to explain things step by step, but this time it’s pretty much just going to be a code dump into this post.

Although the loading service I created is quite a bit different, the component was originally inspired by a similar component forum user Luchillo created. His solution is great, and is more configurable than this solution, but I just wanted a simple loading service that I could show or hide from anywhere and it would block interaction with the screen. Some of the CSS used in this solution is borrowed from there, so credit to Luchillo for that.

Before We Get Started

Before you go through this tutorial, you should have at least a basic understanding of Ionic 2 concepts. You must also already have Ionic 2 installed on your machine.

If you’re not familiar with Ionic 2 already, I’d recommend reading my Ionic 2 Beginners Guide first to get up and running and understand the basic concepts. If you want a much more detailed guide for learning Ionic 2, then take a look at Building Mobile Apps with Ionic 2.

1. Generate a New Ionic 2 Application

Run the following command:

ionic start ionic2-loading blank --v2

2. Create the Loading Component

Run the following command:

ionic g component LoadingModal

Modify loading-modal.js to reflect the following:

import { Component } from 'angular2/core';
import { IONIC_DIRECTIVES } from 'ionic-angular';

@Component({
  selector: 'loading-modal',
  templateUrl: 'build/components/loading-modal/loading-modal.html',
  directives: [IONIC_DIRECTIVES], // makes all Ionic directives available to your component
})
export class LoadingModal {
  constructor() {
    this.isBusy = false;
  }

  show() {
    this.isBusy = true;
  }

  hide() {
    this.isBusy = false;
  }
}

Modify loading-modal.html to reflect the following:

<div class="container" [ngClass]="{'busy': isBusy}">
  <div class="backdrop"></div>
  <ion-spinner></ion-spinner>
</div>

Create a loading-modal.scss file in the same directory:

loading-modal .container {
  z-index: -1;
  transition: z-index 0.2s step-end;

  width: 100%;
  height: 100%;
  position: absolute;

  display: flex;
  justify-content: center;
  align-items: center;

  &.busy {
    z-index: 9999;
    transition: z-index 0.2s step-start;
    .backdrop {
      opacity: 0.3;
    }
  }

  .backdrop {
    opacity: 0.01;
    transition: opacity 0.2s;
  }

  ion-spinner {
    width: 60px;
    height: 60px;
  }
}

Add the following imports to app.core.scss

@import '../pages/home/home';
@import '../components/loading-modal/loading-modal';

3. Add the Component to the Root Component

Modify app.js to import the component, and add it to the template and directives declaration:

import { App, Platform } from 'ionic-angular';
import { HomePage } from './pages/home/home';
import { LoadingModal } from './components/loading-modal/loading-modal';

@App({
  template:
    '<ion-nav [root]="rootPage"></ion-nav><loading-modal id="loading"></loading-modal>',
  directives: [LoadingModal],
  config: {}, // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  static get parameters() {
    return [[Platform]];
  }

  constructor(platform) {
    this.rootPage = HomePage;

    platform.ready().then(() => {});
  }
}

4. Trigger the Loading Service

To use the loading service, all you have to do is grab a reference to it using getComponent and then call the hide and show methods.

Use the component in any class as follows:

import { IonicApp, Page } from 'ionic-angular';

@Page({
  templateUrl: 'build/pages/home/home.html',
})
export class HomePage {
  static get parameters() {
    return [[IonicApp]];
  }

  constructor(app) {
    this.loading = app.getComponent('loading');
  }

  showLoader() {
    this.loading.show();

    setTimeout(() => {
      this.loading.hide();
    }, 2000);
  }
}

Summary

Although this is going to be made redundant pretty soon, I think it’s a pretty simple and clean approach that can be used easily throughout your application. My apologies for the brevity of this post, I wasn’t expecting to be writing it!