Tag: $ionicLoading

14
Jan

Ionic – Closing $ionicLoading if your app loses network connectivity.

When loading data to a screen in your app, you have to have some way of notifying the user of what’s happening. You just have to. Not doing so provides a poor user experience, and ultimately leads to the user becoming impatient and/or frustrated with the app, because it doesn’t seem to behaving in a way that they’re expecting.

This isn’t the experience you want to provide your users with.

Conveniently, Ionic, yet again, have provided us with a simple solution to improve the overall UX: $ionicLoading. See here for the documentation.

$ionicLoading is basically a popover that displays a message whilst data is loading. The only issue with this, however, is that when the message is displayed, the user cannot perform any further actions within the app – they have to wait for the data to load. This works fine when you can guarantee that the app will remain connected to a network, but if you lose connectivity, then the $ionicLoading popover is displayed indefinitely (or until you kill the app). Also, a user may just want to continue to use the app while the data is loading, which is again not possible.

We hunted around, but couldn’t find a suitable alternative to $ionicLoading, so we eventually decided to create our own $ionicLoading template. This was essentially the same style as the default popover, but contained a close button – providing the user with the ability to interact with the app, if desired.

Right, enough yakking, and lets get into some code!

First lets create the HTML for the template…

<!-- Setting up a row/col to position the close button -->
<div class="row row-style">
  <div class="col col-10 col-offset-90 col-style">
    <button class="button button-clear button-style" ng-click="closePodcastsLoader()">
    <i class="ion-close-circled"></i>
    </button>
  </div>
</div>
<p>Loading Podcasts...</p>

And our CSS…

.row style {
padding-bottom:0; 
margin-bottom:0; 
margin-top:-19px;
}

.col-style{
text-align:right;
}

.button-style{
line-height: normal;
min-height: 0; 
min-width: 0;
}

As you can see, the template contains HTML and CSS for the positioning of the close button, and for the message that we want to display on the popover. We’ll save this template as popover-template.html in the templates folder (‘templates/popover-template.html’).

Next, the controller code…

.controller('DataLoadingCtrl', function($scope, $ionicLoading) {
  $scope.loadData = function() {
  // function to load some data here, then show the popover with...
    $ionicLoading.show({
      templateUrl: 'templates/popover-template.html',
      scope: $scope
    });
  }
  // function to close the popover...
  $scope.closePopover = function() {
    $ionicLoading.hide();
  }
});

In the controller code we have a function, that when executed, loads some data and displays the $ionicLoading popover whilst this data is loading. You’ll notice that in the $ionicLoading.show() function, we define our templateUrl property as our HTML template.

We then have a $scope.closePopover() function that’s executed when the close button on the popover is ng-clicked. The user now has the freedom to do whatever they want when the $ionicLoading popover is shown.

And that’s it! A simple workaround for a problem that gave us a headache for a little while.