Ionic: Loading screens

When we are coding an app, we usually need to implement some procedures that take a time to complete. An user may get impatient if the screen is frozen while this actions are taken on the background, that is why developers set up loading screens that let the user know something is going on.

Ionic framework includes this functionality the easiest way possible in three simple steps we need to implement in our controller:

1. Inject the dependencies

First, we need to let our controller know it will need the Ionic implemented service called “$ionicLoading”, so we must inject the dependency on its declaration. Something like this:
.controller('myAppCtrl',['$scope','$ionicLoading', function($scope, $ionicLoading) {

With '$ionicLoading' we tell the controller that the component is going to be used. When we add $ionicLoading as a parameter for the function, we are creating the variable that will provide us with the loading screen functionality.

2. Show the loading screen

Right before we launch that API call, HTTP request or whatever time consuming process we need to perform, we will show the loading screen with something like this:
// Show loading screen
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0

This simple code will show a standard loading screen provided by Ionic with the properties we are providing. More info on this properties can be found on Ionic’s documentation on $ionicLoading.

3. Hide the loading screen

When the time consuming task is finished, we must hide the loading screen. We would have to place this code on, for instance, the callback of an HTTP request:
// Hide loading screen

Custom loading screens

If you look at Ionic’s documentation on $ionicLoading, you will see that one of the options we can provide is a template. We just need to specify an html file from our templates directory and it will be used as a loading screen. You can even specify the HTML code you want inline:
template: 'Loading... Please wait.'