Angular js - show/hide loading gif every new route
angularjs, javascript, loading, routes, toggle
Solution
Short answer: the `$rootScope.layout.loading` changed as expected. But if the templates are loaded the browser has no time to make the changes visible.
Long answer: if you put `console.log` outputs in your `$on` listeners you will see, that a `$routeChangeStart` event fires, the template is loaded and after that `$routeChangeSuccess` fires. Under the hood the following happens:
- `$routeChangeStart` fires
- `$rootScope.layout.loading` becomes `true`
- the template gets loaded asynchronously
- the DOM is updated
- the browser renders the loading gif
a little bit later (the xhr request returns)
- the template was loaded
- `$routeChangeSuccess` fires
- `$rootScope.layout.loading` becomes `false`
- the DOM is updated
- the browser did no longer show the gif
what happens if the tmeplates are cached: - `$routeChangeStart` fires - `$rootScope.layout.loading` becomes `true` - `$routeChangeSuccess` fires - `$rootScope.layout.loading` becomes `false` - the DOM is updated (but this is the same state as before)
As you can see the browser can not render the new state because a script is running that is not interrupted to give the browser time to render the DOM. If the template is not yet loaded, the ajax requests stops the script execution and give's the browser time to render the DOM.
How to fix this?
You can use a `timeout` that give's the browser time to update the DOM:
$rootScope.$on('$routeChangeSuccess', function () {
console.log('$routeChangeSuccess');
//hide loading gif
$timeout(function(){
$rootScope.layout.loading = false;
}, 200);
});
Here is your plunkr with this solution: http://plnkr.co/edit/MkREo0Xpz5SUWg0lFCdu?p=preview
Problem
I'm trying to toggle (hide/show) a loading gif on every new route, so my logic would be: - routeChangeStart = show loading gif - routeChangeSuccess = hide loading gif This is my code: ``` //ANGULAR app.run(function($rootScope) { $rootScope.layout = {}; $rootScope.layout.loading = false; $rootScope.$on('$routeChangeStart', function() { //show loading gif $rootScope.layout.loading = true; }); $rootScope.$on('$routeChangeSuccess', function() { //hide loading gif $rootScope.layout.loading = false; }); $rootScope.$on('$routeChangeError', function() { //hide loading gif alert('wtff'); $rootScope.layout.loading = false; }); }); ``` //HTML ``` <img src="img/loading.gif" ng-hide="!layout.loading"/> ``` it is strange cause this works for 3/4 routes changed then it stop working while changing routes :O what it could be? HERE IS A LIVE EXAMPLE thanks to @Rob Sedgwick : http://plnkr.co/edit/ZpkgRhEAoUGlnXjbLb8b