Nested Views in Angular UI-Router Lag During State Change

Question

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?

Answer 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.