In my current project, I am utilizing UI-Router and taking advantage of the state resolve feature it provides. However, I've encountered an issue where a loader spinner that is meant to display between states gets stuck and does not disappear when transitioning frequently between states.
A similar problem can be observed at this link: . When rapidly switching between states, the loader fails to hide properly.
I have set up listeners for various events like $stateChangeStart, $stateChangeSuccess, $stateChangeError, and $viewContentLoaded to manage the showing and hiding of the loader. Strangely, while $stateChangeStart triggers as expected, $stateChangeSuccess does not. This behavior has left me puzzled. Any thoughts on why this might be happening?
Below is the code snippet related to showing and hiding the loader:
$rootScope.$on('$stateChangeStart', showLoading);
$rootScope.$on('$stateChangeSuccess', hideLoading);
$rootScope.$on('$stateChangeError', hideLoading);
$rootScope.$on('$viewContentLoaded', hideLoading);
function showLoading() {
$timeout(function () {
angular.element('.loading-indicator').show();
}, 50);
}
function hideLoading() {
$timeout(function () {
angular.element('.loading-indicator').hide();
}, 50);
}