Show "searching..." + loading spinner when using refresh

[nvquanghuy]

I know that I can use refresh to asynchornously fetch data from API server. Is there a way for me to give some visual indication to the user that we're loading the data? Similar to how select2 has a spinner, and a "Searching..." text: http://i.imgur.com/3BsemlD.png

http://select2.github.io/select2/ (please see the Loading Remote Data example)

Or if this is not currently supported, I'm happy to open the code and contribute a patch, I just need to be pointed at a right direction.

Thanks!

[moneytree-doug]

This is a nice feature that I would like too. My use case is that my list is just too long and it takes a little time to load.

[brian-slate]

+1

[think2011]

+1

[jarool]

+1

[ggondim]

++1

[sanderai]

+1

[venkatesh13]

+1

[rusboy]

+1

[sebaas]

+1

[Rykie]

+2

Not an elegant solution, but what I have done is this:

At the start of my 'refresh' function, I create one element in the return array, and I set the first item, and the element in the item that I use to display, in the array to something like this: 'vm.myDisplayList = { displayText: 'loading your data ... '; }'

Obviously when your data returns, and is bound back to vm.myDisplayList, then it will show your data.

So my theory is to artificially add a single item into the array while waiting for the data to load, and that item displays a loading message.

It works for me, hope this helps someone.

[thiagorossener]

+1

[erikdubbelboer]

I think this is something most people like to have implemented differently. To accommodate for everyones wishes would complicate the code quite a bit (as you can already see with other features). It's easy for people to currently implement this themselves so I don't think it's good idea to put this into the library.

I think it's better if there would be some good documentation on the various ways people can implement this themselves.

We use ui-disable-choice="item.id < 0" and in our 'refresh(val)' function we set $scope.list = [{id: -1, name:'Searching for ' + val}];.

We also have an ng-class="{'loading': loading}" on the ui-select and during the ajax call we set $scope.loading = true. Then we use some css to add a loading indicator:

.loading:after {
z-index: 10;
    border: solid rgba(9, 62, 78, .2);
    border-top-color: #189dc8;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-width: 5px;
}

[jihunleekr]

+1

[julianosaless]

+30

[rafa-suagu]

+1

[shprink]

+1

[dimylik]

what I did,

1. in your refresh() function set some variable $scope.loading=true, and reset to false on promise response
2. add class to with ng-class="{'searching-in-progress': loading}"
3. add CSS with new background for your search input addon
   .searching-in-progress .select2-search input {
   background: url("http://eartheasy.com/skin/frontend/ee/ee/images/ajax-loading.gif") no-repeat 99% 4px;
   }

this could be extended with 'no-data-found' class if response list is empty, and nice red cross as input addod

[peirick]

+1

[kiddo13]

#1780 Display loading text on refresh

[kiddo13]

I try to create a loading text that would be displayed if refreshAttr return $http promise.
Loading text could be styled with css class .ui-select-refreshing, which you can use to add spinner.

[user378230]

Closed by #1779