On the image, you can see that there are loading spinners next to the numbers.
The DOM element that shows the spinner has ng-if = "gridItem.contentScoreLoadingState == 'loading'".
The DOM element that shows the number has ng-if = "gridItem.contentScoreLoadingState == 'loaded'".
Code is below:
<i class="fa fa-spin fa-spinner" style="font-size: 12px;" ng-if="gridItem.contentScoreLoadingState=='loading'"></i>
<span ng-if="gridItem.contentScoreLoadingState=='failed'">-</span>
<span ng-if="gridItem.contentScoreLoadingState=='loaded'">{{ gridItem.content_score }}</span>
When loading ends, first the number shows and after a small delay loading spinner disappears. But for an instant both of them appears at the same time and I'm not sure why.
On the image, you can see that there are loading spinners next to the numbers.
The DOM element that shows the spinner has ng-if = "gridItem.contentScoreLoadingState == 'loading'".
The DOM element that shows the number has ng-if = "gridItem.contentScoreLoadingState == 'loaded'".
Code is below:
<i class="fa fa-spin fa-spinner" style="font-size: 12px;" ng-if="gridItem.contentScoreLoadingState=='loading'"></i>
<span ng-if="gridItem.contentScoreLoadingState=='failed'">-</span>
<span ng-if="gridItem.contentScoreLoadingState=='loaded'">{{ gridItem.content_score }}</span>
When loading ends, first the number shows and after a small delay loading spinner disappears. But for an instant both of them appears at the same time and I'm not sure why.
Share Improve this question edited Jun 27, 2016 at 17:27 Hopeful Llama 7565 silver badges26 bronze badges asked Jun 27, 2016 at 15:13 OguzGelalOguzGelal 7767 silver badges20 bronze badges2 Answers
Reset to default 9I tried to wrap <i.. inside of a wrapper element and moved to ng-if to there. And it worked. Like this:
<span ng-if="gridItem.contentScoreLoadingState==='loading'"><i class="fa fa-spin fa-spinner" style="font-size: 12px;"></i></span>
<span ng-if="gridItem.contentScoreLoadingState==='failed'">-</span>
<span ng-if="gridItem.contentScoreLoadingState==='loaded'">{{ gridItem.bined_frequency }}</span>
One potential cause could be ngAnimate if you're using that module (grasping at straws, but that's caused me issues in the past).
Regardless, in your situation it probably makes more sense to use a switch:
<span ng-switch="gridItem.contentScoreLoadingState">
<span ng-switch-when="loading"><i class="fa fa-spin fa-spinner" style="font-size: 12px;"></i></span>
<span ng-switch-when="failed">-</span>
<span ng-switch-when="loaded">{{ gridItem.content_score }}</span>
</span>