Condition met ngShow AND ngHide

Question

I try to display the download icon while data is loading, and then the data when it is ready. The problem is that for a few seconds I see the download icon AND data ...

Here is my code

$scope.items[y].content.push({ text: '', loading: true }); API.getContent(id, x, y, function (response, x, y) { $scope.items[y].content[x].loading = false; $scope.items[y].content[x].text = response.data.text; }); 

My opinion:

 <i ng-show="item.loading" class="fa fa-spinner fa-pulse fa-2x"></i> <p ng-hide="item.loading" class="portal-subtitle" ng-bind-html="item.text"></p> 

My content loads asynchronously. The load value is set to false as soon as I get the result, so the icon should be invisible at the moment ... but it is not! (as you can see in the picture).

Any idea how to solve this?

EDIT:

I have displayed the value of my "item.loading". It seems that when the value goes from true to false, the text is displayed, but the icon is still here for a few seconds ... does this help?

thanks for the help

Answer 1

If you are using ng-animate, add this to your css:

 .ng-hide.ng-hide-animate{display: none !important; } 

The animation is expected to complete before ng-hide appears.

The above css will hide the element immediately after ng-hide and ng-hide-animate.