angular js rendering speed [slow] prevents loader from showing

Question

In my application I've tabs which loads form in each tab with certain amount of controls in it! Some tab will have huge number of controls and some might have less. So what I was trying to achieve is to show a loader when contents are being rendered into html. These contents will always be loaded at page load but rendering happens only when the tab is clicked. See the below code!

$scope.activetab = function (tabname) {
   showLoader();
   if (tabname == 'General')
      $scope.GeneralAct = true;
   else if (tabname == 'Contact Information')
      $scope.ContactAct = true;
   else if (tabname == 'Position/Hierarchy')
      $scope.PositionAct = true;
   else if (tabname == 'Ids and Program Access')
      $scope.IdsAct = true;
   else if (tabname == 'Equipment')
      $scope.EquipmentAct = true;
   else if (tabname == 'Licensing')
      $scope.LicensingAct = true;
};

function showLoader()
{
     $('body').append('<div class="loader"></div>');
}

What is happening is showLoader does not work until the render gets completed.

Now when I put alert after showLoader it will fire and loader will be shown. What I feel is the alert stops current execution of code and waits for user response for the alert and it'll render whatever has been executed until then! So is there any work around so that I can show the loader which does not wait for other html contents to render?

What I have tried so far?

• Tried returning a promise from showLoader function and tried to wrap the if else code in $.when and .then functionality.
• Tried keeping <div class='loader'></div> in body instead of appending it everytime and tried to toggle or fadeIn/fadeOut it in showLoader.
• Tried keeping if else in setTimeOut to execute it after some fraction of seconds.

But unfortunately all the results returned with no success! If any workaround to show the loader is there, then I will be gladful to implement it!

Answer 1

First of all read the answer to this question, concentrating on part 2 (edit: and part 1 is pretty relevant... and everything else). The specific issue in your case, never use jQuery to maniuplate the DOM in Angular. That is the job of the model.

While specific cases might seem benign you are going against the intended flow of data in your app. Angular wants strict MVC, controller and view should ONLY communicate via the model because otherwise you can end up with messy and conflicting code. For example you might get cases where changes from Angular overwrite things jQuery has done, or vice versa, and it gets hard to control when and if this happens.

---

On to the actual question. A browser does not re-render constantly and javascript blocks rendering. What this means is that it won't actually render anything until the current stack of javascript code has finished running. So even though you insert the loader first it the browser will not show it until the rest of the code is finished, and since the rest of the code inserts your Angular content both will render at the same time.

You can't really get around this issue, but usually you don't need to. If you need to use a loader it is probably not because of the rendering time itself, it's because you have a http request or something else that is fired when the tab changes, and you are looking to show the loaded until that is complete. Is that what is happening here?

In that case I would suggest putting the loader inside the html of the tab and then have Angular remove it once the tabs content is loaded. So something like this inside the tab html, with css to make sure the loader is only shown when the tab is open:

<div class="loader" ng-hide="dataIsLoaded"></div>

It is however a bit hard to know what you problem is. If the data is only loaded and it's just the renderingtime that this won't help for the reason mentioned above, it won't render until the js is done running. But that is also a strange use case. Very seldom is the rendering itself so slow that you need a loader just for it.

Edit: If your issue actually is that your controller is so large and complex (or you have so many simultaneous controllers) that rendering becomes slow, then you should really be trying to fix that first. Most likely your controller could be significantly simplified so that you don't get these issues.