Loading time between views(html rendering)


#1

Hey, when i’m switching between tabs in my app it takes like 2/3 seconds before any content is actually loaded including the ion-header-bar.

The only thing visible in these seconds are the tabs at the footer. How can i make atleast some content appear in these seconds so my users don’t have to look at a blank screen waiting till the html is rendered and displayed?

I tried the $cordovaSpinnerDialog but this fires after the dom is loaded(which is kind of obvious but not really usefull in this case). So i’m left wondering if someone knows how to display a loading icon before the actual page is loaded? Thanks in advance :smile:


#2
var $http;
	var	interceptor = ['$q', '$injector', '$rootScope', '$q', function ($q, $injector, $rootScope, $q) {
        
        var error;
        
        function success(response) {
	        // get $http via $injector because of circular dependency problem
	        $http = $http || $injector.get('$http');
	        if($http.pendingRequests.length < 1) {
	            $rootScope.$broadcast('loading:hide')
	        }
	        return response;
	    }

	    function error(response) {
	    	// get $http via $injector because of circular dependency problem
	        $http = $http || $injector.get('$http');
	        if($http.pendingRequests.length < 1) {
	            $rootScope.$broadcast('loading:hide')
	        }
	        return $q.reject(response);
	    }

        return function (promise) {
            $rootScope.$broadcast('loading:show')
            return promise.then(success, error);
        }

    }];

    $httpProvider.responseInterceptors.push(interceptor);

Intercept http requests.


#3

Hey, thanks for replying :slight_smile:
I used the http interceptor from the Learn ionic formulas, but this one looks different so i’ll try it.
This is the version i used Loading screen with interceptors


#4

That one is suitable only for blazing fast 4g connections because it only works with http headers not the actual response.


#5

Is there a special place i need to put this? i set it outside of the app but it didn’t fire, so now i moved inside the app.run function


#6

I have it inside my config.


#7

Sooo it runs, and fires ! but i can’t see a dialog or spinner wheel or message. So what exactly is this supposed to do? am i missing something?


#8

Use $ionicLoading …


#9

Touché :stuck_out_tongue: