AngularJS ngIf and ngShow - Lag to Remove Elements from DOM

February 15, 2019

I've been working on an upgrade on some existing features on our app at work. I added a little animated div for each metric box while it was loading. You can see an example here:

See the Pen Metric Loader POC by Chris Perko (@ChrisPerko) on CodePen.22090

Once the data is loaded, this little element should disappear. However, it would lag horribly. The data would show up, and animation would remain for a second or two, and then disappear.

I tested this with both ngIf and ngShow, no change. I also wrapped the JavaScript that loads the value in a $timeout function, to make sure that the Angular digest was picking up the changes correctly.

The Problem and Solution

So what was causing this? Was it because we were using before and after pseudo-elements on the .metric-loader div? Or, was it the animations?

It was actually the animations. The showing and hiding within Angular works perfectly fine with pseudo-elements, but for some reason waits until the animation is at a certain point before it removes it if animating.

The solution was simple; wrap the .metric-loader in a div. This outer div should have the ngIf or ngShow directives. Problem solved!

<div ng-show="!metrics || !metrics.length">
    <div class="metric-loader"></div>

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © 2020 Chris Perko

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram