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:
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.
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> </div>
Copyright © 2020 Chris Perko