How to display something when filtering is slow using AngularJS

Question

In angular I have a table and a search box where user can type and angular will search among the data and display a table. The problem is that I have enough data that filtering can get slowed down, in this case, I would like to display a spinner:

Sample similar to my html:

<body ng-controller="MainCtrl">

Search: <input ng-model="searchText">
<table id="searchTextResults">
  <tr><th>Name</th><th>Phone</th><th>Address</th><th>City</th><th>Zip</th><th>Country</th></tr>
  <tr ng-repeat="friend in friends | filter:searchText">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.address}}</td>
    <td>{{friend.city}}</td>
    <td>{{friend.zip}}</td>
    <td>{{friend.country}}</td>
  </tr>
</table>
<div class='myspinner' > <!-- display only if filtering is occurring -->

The question is, how can I display a spinner each time that filtering is occurring?

CSS for spinner div:

.myspinner {
       position: absolute;
       left: 45%;
       top: 45%;
       height:50px;
       width:50px;
       margin:0px auto;
       position: absolute;
       -webkit-animation: rotation .6s infinite linear;
       -moz-animation: rotation .6s infinite linear;
       -o-animation: rotation .6s infinite linear;
       animation: rotation .6s infinite linear;
       border-left:6px solid rgba(0,170,240,.25);
       border-left: 6px solid rgba(0,170,240,.25);
       border-right: 6px solid rgba(0,170,240,.25);
       border-bottom: 6px solid rgba(0,170,240,.25);
       border-top: 6px solid rgba(0,170,240,.6);
       border-radius:100%;
    }

link to plunkr: http://plnkr.co/edit/NcbPPcxL1rk0ZBKpbqZG?p=preview

On idea I have is to do ng-change and display the spinner then, but it will not know if the filtering is completed — SoluableNonagon, Mar 11 '14 at 19:42
another idea is to wrap the filter in your own filter, and emit an event when it's starting / finishing. i don't think, however, that the problem is with the filter. the lagginess is more likely to originate from the `ng-repeat`. — Eliran Malka, Mar 11 '14 at 19:44
I suppose it can. Perhaps [Ben Nadel's approach](http://www.bennadel.com/blog/2487-Filter-vs-ngHide-With-ngRepeat-In-AngularJS.htm) will help here, I've made a [demo based on his suggestions](http://plnkr.co/edit/JBTtYkuKsN3vQnUJGrtq?p=preview) for manual filtering, suiting your situation. Try and fiddle with it and see what you get. — Eliran Malka, Mar 11 '14 at 20:27
@EliranMalka - Thanks, that is actually a little useful, nice demo, but doesn't really address the hiding/showing of the spinner — SoluableNonagon, Mar 11 '14 at 20:38
True, but that should get you started by granting more control over the filter life cycle, so you can possibly jam some events in there. — Eliran Malka, Mar 11 '14 at 20:40

score 1 · Answer 1 · answered Sep 27 '17 at 11:31

Not sure if it works but you can try.

Add a new filter

 app.filter('ngRepeatFinish', function($timeout){
return function(data){
    var me = this;
    var flagProperty = '__finishedRendering__';
    if(!data[flagProperty]){
        Object.defineProperty(
            data, 
            flagProperty, 
            {enumerable:false, configurable:true, writable: false, value:{}});
        $timeout(function(){
                delete data[flagProperty];                        
                me.$emit('ngRepeatFinished');
            },0,false);                
    }
    return data;
};
})

New function in your controller

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
  $scope.showSpinner = false;
  $scope.$apply();
});

And your HTML

<tr ng-repeat="friend in (friends | ngRepeatFinish)"

Mind the parentheses

score 0 · Answer 2 · answered Mar 11 '14 at 20:51

0

you might also need to create your own directive for filtering the information, the default ng-filter is slow because it checks through all the fields on your objects.

you can create a custom ng-directive for filtering into your specific fields, take a look

answered Mar 11 '14 at 20:51

luster

148
4

I know the filter can be slow because it parses lots of data, the thing I want is to display some sort of feedback to the user so that that signifies that it's loading. – SoluableNonagon Mar 11 '14 at 21:30

How to display something when filtering is slow using AngularJS

2 Answers2

Linked