Why is my Angular JS ng-show empty list div shows up for a split second while API is being called?

Question

<div ng-show="!activities.length">No items in feed</div>

I use the above code to show a message when a user has no items in their feed. On that same page I have a radio button to show different types of feeds (eg just yours, or all your friends, etc.). When the user selects a different option, it makes a post back to my API which takes a second, but while the api is grabbing the data the empty list message displays for a second.

Is there an easy way to resolve this?

Answer 1

Use the ngCloack directive for this:

http://docs.angularjs.org/api/ng.directive:ngCloak

Answer 2

The other option is to use ng-bind as many people recommend it over ng-cloak:

http://docs.angularjs.org/api/ng.directive:ngBind

I personally have had issues where even using ng-cloak there is a slight markup flash.