We have a canvas with loader animation, we toggle visibility of it in each response of each service.
When angular is ready to populate scope, sometimes canvas freeze by some seconds stopping the animation and scope goes normally.
Canvas is on a directive, we update it each time:
var exportRoot = new lib.htmlloader();
var stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
Supposition 1: Loader is inside ui-view="content" of results then bug.
Supposition 2: Chrome doesn't handle well response then crash for some seconds
Supposition 3: Update canvas on directive sometimes fail
We know its better to have one loading for all pages, but we have different cases, like load on modals, on small grids and not global, etc.
Resolved by using css animation instead js / gif. Inspired by AngularJS: show loading animation for slow script, e.g. while filtering quote: "First, you should use CSS animations. No JS driven animations and GIFs should be used within heavy processes bec. of the single thread limit. The animation will freeze. CSS animations are separated from the UI thread and they are supported on IE 10+ and all major browsers. Write a directive and place it outside of your ng-view with fixed positioning. Bind it to your app controller with some special flag. Toggle this directive's visibility before and after long/heavy processes. (You can even bind a text message to the directive to display some useful info to the user). -- Interacting with this or anything else directly within a loop of heavy process will take way longer time to finish. That's bad for the user!"
But i dont need to put out of ui view. PS: Found nice loaders in https://connoratherton.com/loaders