I have a page with 8 tabs, each containing a lot of HTML controllers (data bindings), resulting in slow data rendering.
To address this issue, I implemented an ng-if condition based on the active tab determined by ng-click. The active tab is visually indicated using a CSS class. After implementing the ng-if condition, the default tab loads quickly and subsequent tab clicks trigger loading for each tab. However, each tab takes approximately 3 to 6 seconds to render, leaving the user unaware of the loading process. To improve user experience, I am considering adding a loading spinner.
My objective now is to display an AngularJS loading spinner when clicking on each tab until the tab is completely rendered (the tab remains inactive until ng-repeat finishes rendering). The plan is to show the spinner during the ng-click event and remove it once ng-repeat completes rendering. However, I encountered an issue with the timing of the spinner initiation. Even though I trigger the spinner logic in ng-click, it starts towards the end of the tab rendering process and stops immediately as ng-repeat finishes. This happens due to background processes affecting the spinner's functionality. How can I effectively implement a loader or loading message for tab rendering? Below is my sample code for the page, ng-click event, and identifying the end event of ng-repeat:
HTML Code:
<div class="claimant-data-nav " ng-controller="MyController">
<ul class="nav nav-tabs ">
<li ng-repeat="tabname in Mylist | unique:'TabName'" ng-class="{'active':tabname.TabName == 'Tab1'}">
<a data-target="#tab-{{tabname.TabName}}" data-toggle="tab" ng-click="activetab(tabname.TabName)">{{tabname.TabName}}</a>
</li>
</ul>
<div class="tab-content">
<a data-toggle="tab" class="mobile-tabs" data-target="#tab-{{tabname1.TabName}}" href="javascript:void(0)" ng-repeat="tabname1 in Mylist | unique:'TabName'">{{tabname1.TabName}}</a>
<div id="tab-{{tabname2.TabName}}" ng-class="{'tab-pane fade active in':tabname2.TabName == 'Tab1','tab-pane fade':tabname2.TabName != 'Tab1'}" ng-repeat="tabname2 in Mylist | unique:'TabName'">
<div ng-if="activetab == tabname2.TabName">
<div ng-repeat="item in items" on-finish-render="ngRepeatFinished">
<!-- data binding logic here.It has lot of angularjs databindings.-->
</div>
</div>
</div>
</div>
</div>
In the ng-click function, I initiate the loader:
.scope.activetab = function(tabname){
showloader();
//some other codes here to set active tab etc.
}
To determine the completion of ng-repeat, I utilized the following directive:
app.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished');
});
}
}
}
});
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
removeLoader();
});