angular ng-if or ng-show responds slow (2second delay?)

Question

I'm trying to show or hide a loading indicator on a button when a request is busy. I do that with angular by changing the $scope.loading variable when a request is loading or when it's done loading.

 $scope.login = function(){
     $scope.loading = true;
    apiFactory.getToken()
        .success(function(data){
            
        })
        .error(function(error){
            
        })
         .finally(function(){
               $timeout(function() {
                 $scope.loading = false;
               }, 0);
         });
 };

In the frontend:

<button ng-disabled="loading" class="button button-outline button-positive" type="submit">
Log in 
<span ng-if="loading" class="ion-refreshing"></span>
</button>

This works fine, but the loading icon (ion-refreshing) is shown for about 2 seconds, while the $scope variable is updated immediately. I tried $scope.$apply but that doesn't seem to be what's wrong here, the scope is updated just fine and immediately after the request. It's just the icon that isn't responding quickly enough.

Negative. No animations involved. Using ng-class instead seems to help. — Jorre, Nov 15 '14 at 10:46
I'm having the same or a similar issue. The scope is updated immediately and correctly — I verified this by logging messages from withing the `$scope` functions that `ng-if` uses to find out if the relevant elements should be shown. However, buttons with `ng-if` stay incorrectly visible, or hidden, for some second. Then after a short while all buttons take their intended visible/hidden states. — I worked around this by using `ng-hide` instead. Angular version 1.2.16. — KajMagnus, Mar 24 '15 at 07:50

Palvinder · Answer 1 · 2015-09-11T19:27:47.750

126

Try removing ngAnimate if you're not using it from your app config and index.html page:

angular.module('myApp', [...'ngAnimate',...])

@Spock; if you still require the use of ngAnimate then leave your app config untouched and just add the following CSS:

.ng-hide.ng-hide-animate{
     display: none !important;
}

That will hide the animated icon straight after your condition is met.

As you can see we are setting .ng-hide-animate to hidden. This is what causes the delay as it waits for the animation to complete. You can add an animation to your hide event as the class name implies instead of hiding it as in the example above.

edited Sep 11 '15 at 19:27

answered May 27 '15 at 11:19

Palvinder

1,447
1
10
9

1

I had a simple page with only a couple of `ng-if`, `ng-show` that was visibly slow. I removed `ngAnimate` and it fixed the problem for me. Thanks! – Eamonn Gahan Jun 04 '15 at 13:02
1

This solved a problem I was having as well... Do you know why the presence of ngAnimate was causing the slow transition? – Clark Jul 04 '15 at 01:31
Had the same problem - removing ngAnimate solved it.. but this is not good .. many modules need ngAnimate to do cool animations.. what to do? ngAnimattias where are you? :) – Spock Aug 21 '15 at 11:01
22

In the case of `ng-if`, adding just `.ng-leave { display:none; }` to the element did the trick for me (`!important` wasn't needed). – Joao Feb 26 '16 at 20:11

score 39 · Answer 2 · answered Jan 12 '15 at 23:00

39

I had the same issue, and worked-around it by using ng-class with the 'hidden' class name to hide the element instead of using ng-if or ng-show/ng-hide.

answered Jan 12 '15 at 23:00

neimad

594
5
5

1

Seems related with animations and/or event handlers. Not really sure why the others are slow, but I'd like to know – Thiago Festa Jul 09 '15 at 20:54
1

how can you do this? – jsmedmar Feb 15 '16 at 23:56
This is so much faster! Why is this?? – Aron Jun 01 '16 at 20:52
1

I would think this is simply down to the fact that using ngAnimate applies entry/exit animation behaviours to elements using ng-if/ng-show, while it does not do so for changes in ng-class expressions. – John Rix Sep 18 '17 at 11:02
@neimad how is this done? In my case, I need to use ng-if to test whether a property value is `null` (which it is for a couple seconds waiting for the api call), so two select elements are showing briefly. So are you not using `ng-if `at all? Thanks. – Chris22 Mar 28 '19 at 21:15

score 18 · Answer 3 · answered Jun 02 '16 at 11:42

I found some solutions here, but the best for me was overriding the styling for the .ng-animate class:

.ng-animate.no-animate {
    transition: 0s none;
    -webkit-transition: 0s none;
    animation: 0s none;
    -webkit-animation: 0s none;
}

In html:

<button ng-disabled="loading" class="button button-outline button-positive" type="submit">
    Log in 
    <span ng-if="loading" class="ion-refreshing no-animate"></span>
</button>

This is an example: http://jsfiddle.net/9krLr/27/

I hope help you.

score 14 · Answer 4 · answered Jun 06 '17 at 07:31

14

I was facing a similar issue, I used $scope.$evalAsync() to force update the binding.

It works like a charm.

Avoid using $scope.$apply as it can conflict with an already-running $digest phase.

if(selectedStatistics.length === 0 || selectedWorkgroups.length === 0){
    ctrl.isSaveDisabled = true;
    $scope.$evalAsync();
} else{
    ctrl.isSaveDisabled = false;
    $scope.$evalAsync();
}

answered Jun 06 '17 at 07:31

pixlboy

1,452
13
30

Worked for me. But does it have any disadvantages? – Sarah Tammam Jul 15 '18 at 11:41
1

I haven't encountered any. Its very handy in case of async operations. – pixlboy Jul 15 '18 at 12:29
1

Thank you for the helpful reply :) – Sarah Tammam Jul 15 '18 at 14:43
By the way this delayed issue is mainly happening in the localhost environment and rarely in production - dont know why – Abdeali Chandanwala Oct 13 '20 at 12:25

score 1 · Answer 5 · answered Aug 14 '17 at 03:25

in angular version 1.5.x adding $scope.$apply() after the change in the condition done the job for me here is an example function

$scope.addSample = function(PDF)
        {
            var validTypes ="application/pdf";
            if(PDF.type == validTypes)
            {
                //checking if the type is Pdf and only pdf
                $scope.samplePDF= PDF.files[0];
                $scope.validError = false;
                $scope.$apply();
            }

            else
            {
                 $scope.validError = true;
                 $scope.samplePDF= null;
                 $scope.$apply();
            }


        }

score 1 · Answer 6 · answered Aug 11 '19 at 17:59

I had the same issue when using

<div *ngIf='shouldShow'>
    <!-- Rest of DIV content here -->
</div>

In my case I solved it by adding a class:

.hidden {
  display: none;
}

and then adding the class conditionally instead of using *ngIf:

<div [ngClass]="{'hidden': !shouldShow}">
    <!-- Rest of DIV content here -->
</div>

If always using it this way, I would consider renaming shouldShow to shouldHide (and negate the logic that assigns it), so it can be used as shouldHide instead of !shouldShow.

If you have display: flex in your CSS for the DIV's existing class, that display property might take precedence over the display: hidden. An easy fix can be to use display: none !important instead, but there are often better solutions to ensure precedence in other ways. Here is a good read about alternatives.

score 1 · Answer 7 · answered Mar 16 '21 at 14:59

I ended up using Ruben's solution but because I can't afford to add an extra class to all existing cases, I listed the directives I am always using without animations, expecting immediate rendering:

*[ng-hide],
*[ng-show],
*[ng-if],
*[ng-switch-when],
*[ng-switch-default] {
  transition: 0s none;
  -webkit-transition: 0s none;
  animation: 0s none;
  -webkit-animation: 0s none;
}

angular ng-if or ng-show responds slow (2second delay?)

7 Answers7

Linked