condition met ngShow AND ngHide

Question

I'm trying to display a loading icon while data is loading, and then the data when it's ready. The problem is I for a few seconds, I can see loading icon AND the 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 view :

<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 is loaded asynchronously. The loading value is set to false at soon as I get the result, so the icon should be invisible at this moment... but it's not ! (as you can see on the picture).

Any idea how to solve this ?

EDIT:

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

Thanks for your 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 waiting to complete before the ng-hide kicks in.

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