Angularjs Loading spinner or loading logic while DOM rendering

Question

I have a page that has about 8 tabs, and each tab has lot of HTML controllers (data bindings). So data rendering becomes slow.

So I used ng-if condition based on active tab which is found using ng-click on tab. The active tab is made visible using a CSS class. After using the ng-if condition, the default tab gets loaded fast, and on subsequent clicks on other tabs, each tab gets loaded. But each tab takes about 3 to 6 seconds to render, and at this point the user does not know what is happening and whether the page is loading. So I am planning to include a loading spinner.

Now I want to show a angularjs loading spinner when I click on each tab until the tab gets rendered completely. (The tab will not become active until ng-repeat gets completed as it is keeps rendering). So I planned to load the spinner during the ng-click event of the tab. The loading spinner is removed when ng-repeat gets completed. But the problem is with the spinner gets staring part. Even if I start the spinner loading logic in ng-click, it start almost at the end of tab rendering and spinner stops immediately as ng-repeat gets completed. The problem is due the page rendering background process which makes even the spinner to gets stuck and load it properly. So, how can I use a loader or loading message for tab rendering? Below is my sample code for page, ng-click event and to find 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 i activated the loader

.scope.activetab = function(tabname){
    showloader();
    //some other codes here to set active tab etc.
}

To check ng-repeat is complete i have used below 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();
});

Truche · Accepted Answer · 2015-05-14 11:17:06Z

0

You could simply use $timeout function to trigger your spinner and wait for its promise to make your tab active :

.scope.activetab = function(tabname){
    $timeout(function() {showloader();})
        .then(function() {
            //some other codes here to set active tab etc.
        });
};

answered May 14, 2015 at 11:17

Truche

5231 gold badge5 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Moni Bhattacharya · Accepted Answer · 2015-05-14 12:19:58Z

0

You can do that by using the ng-show directive of angularjs. Here is an example for your reference .

Place a loader in html like this

<div ng-show="load">Loading...</div>

In Controller

app.controller("showCustomer", function ($scope,myService) { 
loadCustomers();
function loadCustomers() {
    $scope.load=true;
    var promiseGet = myService.loadCustomer();

    promiseGet.then(function (obj) {
        $scope.Customer = obj.data;
        $scope.load=false;
    },
          function (errorObj) {
              $scope.error = 'failure loading Customers', errorObj;
              $scope.load=false;
          });
}

You can also visit this link http://www.angulartutorial.net/2014/04/show-and-hide-in-angular-js.html

Hope it will help you.

Thanks.

answered May 14, 2015 at 12:19

Moni Bhattacharya

1333 silver badges14 bronze badges

1 Comment

Navaneet Over a year ago

Showing a simple loader is not the problem like during ajax call etc. I need to show loader during rendering.The problem is like loader itself will not display during rendering

Collectives™ on Stack Overflow

Angularjs Loading spinner or loading logic while DOM rendering

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related