$ionicLoading on specific html tag


#1

I’d like to show the $ionicLoading on a specific html tag like ion-view or ion-content or div.

I mean, at the moment $ionicLoading freeze the entire app.
It would be useful to leave outside the $ionicLoading freeze at least tabs and navigation bar in order to let user change view if necessary.

Or, is there a different way to let user know that content is loading without freezing everything? Am I missing something?


#2

So you just want to show a loading indicator in-line with the page but still let the user do things? The $ionicLoading is freezing the entire page so the user can’t navigate, click buttons, etc. while it loads the data.

If you just want to give the user a visual indication that something is loading, use a ng-if on a busy indicator icon (using Ionicons v1.5.2):

<i ng-if="loadingData" class="button button-icon icon ion-loading-c"></i>

Then, when you call the function to load the data you can set loadingData to true

$scope.loadingData = true;

and set it to false when the loading is done. You can style this icon to cover the entire content if you don’t want them to do anything on the page (except navigate away from it). You can also put this into a service and call a function to show/hide it if you need it on multiple pages.


#3

Thanks @brandyshea for your help. Yes, that could be definitively a solution.

Anyway I think it could be useful to have $ionicLoading that could eventually freeze everything except menus, tabs and nav bars. I think this would create a better UX.


#4

@brandyshea that would work in terms of letting the user know but limits a fine-grain control over the user experience. A method to overlay just a specific html element would be very nice. I have a dashboard-type app, and I would like the user independent control over each box in the dashboard.