No way to respond to view state change cancellations

[janakerman]

In summary, I'm trying to build a loading spinner that shows during state changes. I'm utilising resolves on each of my states. If I transition between them quickly, I have no way of hiding the loading spinner. Here's an event timeline & commentary:

1. Click to load into state A.
2. Click to load into state B (long resolve begins) and $stateChangeStart is fired.
3. Click to load into state A (state A is currently active so no events are fired).

Ideally, I'd receive a $stateChangeCancelled event for state B. I could also work with a $stateChangeSuccess transition for the re-entry into state A (3).

A SO post from someone else experiencing a similar problem is available here. He also provides a Plunkr.

[eddiemonge]

There is a stateChangeCancel event:

ui-router/src/state.js

Line 1081 in dba25db

$rootScope.$broadcast('$stateChangeCancel', to.self, toParams, from.self, fromParams);

You should probably use a service. Add the state being transitioned to in the stateChangeStart event. Load the spinner for any state in the service. In the stateChange{Success|Cancel} event, remove the state from the service. Once all states have been removed, the spinner should go away as well.

closing since its the same question on stackoverflow and its an implementation issue, not ui-router bug. If there is a bug in any of this, we can reopen or a new ticket can be created with the specific bug.

[arjunu]

That cancel event will be called only when we manually cancel a state change (via code) but not in the scenario described above. Please check this Plunk

[eddiemonge]

So its not really a bug but should be a feature request.

[Grety]

There is a way currently to handle superseded transition. Need to handle the transition promise returned by $state.go. See more details in my answer on SO.
Actually you can't do anything with the state's resolve promise because it is custom and ui-router can't have control of it. Have to handle it in code

[Jaco-Pretorius]

+1 for this issue, I'm having exactly the same problem. Same as @janakerman -

Ideally, I'd receive a $stateChangeCancelled event for state B. I could also work with a $stateChangeSuccess transition for the re-entry into state A (3).