$ionicLoading.show while resolving state objects

I’m trying to show loading indicator if state needs to resolve a dependency.

$rootScope.$on('loading:show', function (event,data) { $ionicLoading.show({ template:'Please wait..' }) })

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { if (toState.resolve) { $rootScope.$broadcast('loading:show') }} )

$stateProvider.state('reservations', { url: '/reservations', resolve: { reservations: function (reservationService) { return reservationService.findAll(); } } })

However the indicator never shows up. Do you have any idea?

Thanks…

1 Like

Hey,
Did you get solution this problem?

Not yet. It’s interesting that when I try it in codepen, it’s working.

This is working for me, YMMV.

$rootScope.$on('loading:show', function () {
    $ionicLoading.show({
        template:'Please wait..'
    })
});

$rootScope.$on('loading:hide', function () {
    $ionicLoading.hide();
});

$rootScope.$on('$stateChangeStart', function () {
    console.log('please wait...');
    $rootScope.$broadcast('loading:show');
});

$rootScope.$on('$stateChangeSuccess', function () {
    console.log('done');
    $rootScope.$broadcast('loading:hide');
});

@devstudio
that doesnt work for me, the console log message shows up but the loading indicator does not.

Do you also have this code (or similar) in your app to show the spinner when $http is used (in a service for example?)?

.config(function($httpProvider)
{
	$httpProvider.interceptors.push(function($rootScope)
	{
		return {
			
			//http request show loading
			request: function(config)
			{
				$rootScope.$broadcast('loading:show');
				return config;
			},
			
			//hide loading in case any occurred
			requestError: function(response)
			{
				$rootScope.$broadcast('loading:hide');
				return response;
			},
			
			//Hide loading once got response
			response: function(response)
			{
				$rootScope.$broadcast('loading:hide');
				return response;
			},
			
			//Hide loading if got any response error 
			responseError: function(response)
			{
				$rootScope.$broadcast('loading:hide');
				return response;
			}
		}
	})
})

When i comment the code above in my app and run it the spinner shows up while resolving the data in the state. Maybe this sets you on track for a solution?

This solution just works perfect for me. You need to implement the event broadcaster in the run block and the $ionicLoading function on a global/main controller.