CODEWITHSUNDEEP
javascriptangularjsperformanceuser-interface
tensai
tensai

Reputation: 1696

AngularJS timing on loading values into ng-if directive

I am using an few ng-if directives on elements while details about them are loading. This is so I can show a user a loader graphic while the element value is undefined. When the value gets defined the ng-if equates to false and hides itself.

Following that another ng-if equates to true which looks for the value being instantiated to some value.

<span ng-if="signboard.activeSlideshowId && signboard.activeSlideshowId!=0 && signboard.activeSlideshowId!='failed' && signboard.activeSlideshowName!='failed'"><a href="#/slideshows/{{ signboard.activeSlideshowId }}">{{ signboard.activeSlideshowName }}</a></span>
<span ng-if="signboard.activeSlideshowId==undefined"><i class="fa fa-spin fa-spinner"></i></span>
<span ng-if="signboard.activeSlideshowId=='failed' || signboard.activeSlideshowName=='failed'" class="text-warning">Failed</span>
<span ng-if="signboard.activeSlideshowId==0">No Active Slideshow</span>

The value in this ng-if takes some time to be populated leaving the space blank for a few noticeable moments. I can only take this to be that the ng-if adds these new elements to the dom and only on the following internal run of $scope.$apply() will these values be updated in the UI.

angular-ng-if-loading

How can I make it that these transitions are smoother to the user, so that there isnt so much time inbetween the elements being displayed. I chose ng-if over ng-show because the page will contain a list of items and each column contains a value which needs to be individually populated from an asynchronous call. I am under the impression that too many ng-show/ng-hide calls on a page would really hamper performance.

Upvotes: 0

Views: 468

Answers (1)

dting
dting

Reputation: 39297

You can use ngHide with a one time binding:

<span ng-hide="::signboard.activeSlideshowId"><i class="fa fa-spin fa-spinner"></i></span>

Upvotes: 2

Related Questions