While waiting for details to load, I have implemented a few ng-if directives on elements. This way, I can display a loading graphic to the user while the element value is undefined. Once the value is defined, the ng-if evaluates to false and hides itself.
Subsequently, another ng-if statement evaluates to true, checking if the value has been set to a specific 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 delay in populating the value within this ng-if creates a noticeable blank space for a short period of time. It seems that the ng-if adds these new elements to the DOM, and only after the subsequent internal run of $scope.$apply() are these values updated in the UI.
Is there a way to make these transitions smoother for the user, reducing the time between displaying elements? I opted for ng-if over ng-show because the page contains a list of items, and each column requires individual population from an asynchronous call. I believe that excessive use of ng-show/ng-hide could greatly impact performance on the page.