CODEWITHSUNDEEP
javascriptangularjsscope
OguzGelal
OguzGelal

Reputation: 756

AngularJS ng-if has a strange delay

problem with delay

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.

Upvotes: 3

Views: 1456

Answers (2)

OguzGelal
OguzGelal

Reputation: 756

I 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.combined_frequency }}</span>

Upvotes: 9

John
John

Reputation: 17501

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>

Upvotes: 0

Related Questions