AngularJS freeze browser tab

[Piotr Michalak]

I'm using angular to pretty big application, it is application about restaurants menus. When I open popup with 'Example Menus' angular is loading menus from back-end and shows results as list (this works perfectly). Then script selects first menu from array (again menu is loading from back-end, this time with additional informations) and loads it to live view on same popup. Every menu contains some amount of dishes (it can be just one but also it can be about hundred). After menu load (I know that it is loaded because I can see this menu in console and also I can see it on live view) angular is freezing for some period of time (more dishes on menu - longer freeze). I dont get it why Angular is freezing when whole object is actually loaded? Can you help me to get how I can reduce/remove this freeze or just how can I catch it to show loading screen?

Here you can see that there is repeated one function (freeze lasts about 10 seconds what is unacceptable)

https://scr.hu/VKvM3v

Here you can see single block (lasts about 200ms):

https://scr.hu/zJKwXJ

And here you can see call tree of single block:

https://scr.hu/ywBwKg

Hope you can help me guys, I spend a lot of time on it and got almost nothing...

[Sander Elias]

Hi Piotr,

It's hard to say from the screen-dumps you have provided. It looks as if you are manipulating data while the view is being populated. This causes the digest cycle to repeat.

I suspect if you do all this manipulation once, just after receive, and then only display the result, your problem will be largely gone.

However, with no access to the running project, it's hard to give recommendations on how to fix this.

Regards

Sander