5

I have a parent view with a nested view in the middle.

On a state change, the nested view seems to stick for a second or two before loading the next state. It's as though the nested view is lagging behind or something.

For example, after logging in, the login form is still visible for a second or two in the middle of the page after the state change. The parent view changes instantly, but that nested view just seems to stick.

I've been pretty careful about items on the watch list, and use one-time binding wherever possible.

But I really don't think it has to do with that, because this happens even early on in the application (from login to the main page), and other than this issue, application performance is fine.

I've googled a lot about this, but haven't turned up anything useful.

Any ideas on what to check or how to debug this?

dennis.sheppard
  • 2,565
  • 3
  • 19
  • 16

1 Answers1

1

You say it only happens the first time you transition after loading the app. So it could be you are injecting a service into the child view that you are using the first time in your app. This service is taking some time to instanciante. Servises are singletons, so this lag is only visible the first time.

Look at the answer in this thread for a possible solution, somebody had the exact some problem: How to instantiate a service dynamically?.

Another solution might me to inject that service into the parent view as well, so you get the lag while loading the app not on first transition.

Community
  • 1
  • 1
Reto
  • 3,107
  • 1
  • 21
  • 33
  • Thanks for the response, but I don't believe I mentioned this only happens on the first transition. The example I used was the login to the main page, wish happens to be the first state change. It happens all over the app. – dennis.sheppard Mar 29 '15 at 16:18
  • 1
    ok, another thing to check is duplicate state transitions, this happened in our large app: ui-router transitionend into a child state and before rendering the child state it would redo the transition again. We traced this to missing paramters where ui-router compared "undefined" to "empty string". We now log in $stateChangeStart and $stateChangeSuccess to console to detect such double transitions and add the missing params as emtpy string in $state.go() / ui-sref. The symptom was very similar as you describe yours. – Reto Mar 29 '15 at 18:42
  • Duplicate states weren't the problem. But using $stateChangeStart and $stateChangeSuccess pointed me in the right direction. There was a resolve between states that was taking anywhere from 500ms to a couple of seconds. The resolve keeps the nested state from changing, even though the parent state does change. I got rid of the resolve, and the state change is down to ~30ms. The nested view does still noticeably stick, but not nearly as badly. – dennis.sheppard Mar 29 '15 at 19:50
  • thanks for the feedback, please consider upvoting/accepting an answer if it was any help for you, thanks. – Reto Mar 30 '15 at 05:28
  • Your answer wasn't really the answer, though. I upvoted your comment that helped thanks to the $stateChangeStart and Success. For me, the (partial) answer was a resolve between two states causing the nested view to keep showing/slowing down the state change. This discussion (and this comment, in particular) has more info: https://github.com/angular-ui/ui-router/issues/456#issuecomment-57142674 Unfortunately, even after removing the resolve, the particularly slow state change is still 3x slower than most other state changes in the app, and I don't know why. – dennis.sheppard Mar 30 '15 at 13:07