Feature request - Non-intrusive loader bar

ionic-v1
1

Not sure where to post it so I’m throwing it in here to prevent polluting the GitHub ‘issues’.

I would love to see a non-intrusive loading feedback in Ionic Framework. There are several apps out there wo already implement similar functionality so I presume that my screenshot will do all the explaining for me:

Yes, I have the Ionic forum and documentation as pinned tabs

The idea is simple: I want to show loading feedback to a user but still allow the user to use the app in the meanwhile.

For example, I’m opening a list view where cached items are shown from the previous time I opened that view. But the app detects there is an internet connection and is automagically reloading the list view data in the background.

Right now, the user doesn’t know that this background process is running and might go ahead and try to pull-to-refresh himself.
Another scenario would be that the user will receive feedback of this loading event through an $ionicLoading ‘modal’ which blocks all app interaction while the user just wanted to scroll down to some data that was already available.

In both cases, a non-intrusive loading feedback like the black bar in my example would be awesome.
Of course, this loader animates with a ‘slide down’ from behind the header and slides back up when done.

Does anyone else like this idea and/or is something similar already available / in development? Do you know about this @Calendee?

2

i think you are talking something similiar as in my topic.

3

Allright, where is your topic? If it’s similar, better link to it :wink:

4

Would “Toast” indicators work?

If not, I think it’s a reasonable request. I could see myself using it too. Feel free to submit a feature request.

5

@Calendee not sure. From what I can see in the feature proposal of @andy, the functionality seems the same. But I’m really looking for this exact same UI behavior.

If there are no short term plans for this, I will try to implement it myself.

6

@Robin here’s how you could do it:

(1) Treat the loading bar like any other bar (header, subheader, …)
(2) Create CSS class to make it positioned correctly (.bar.bar-loading)
(3) Create CSS class to make content positioned correctly (.has-loading)
(4) Use ng-class on content to add/remove .has-loading from content if loader is shown
(5) Add ng-if on .bar-loading element if loader is shown
(6) Add a simple animation for fun

4 Likes
7

@andy Dude. I… freakin’… LOVE YOU!

That is exactly what I meant!

8

You’re welcome. :smile:

Just updated the example to have a sliding animation; I though it had it before but the codepen wasn’t saved correctly.

9

You should save it to the Ionic CodePen example snippets. I bet there are more people looking for similar functionality.

Again; thanks a lot.

10

Yes, very helpful. Thanks!

11

Just added : http://codepen.io/ionic/pen/pEter/

2 Likes
12

While this solution works,it would be great to have a non-instrusive loader nonetheless. Doing it manually like suggested needs adding elements to the view and the controller. I trigger the loader from a directive with isolated scope, which result in even more dependencies and things to rembember :wink:

But since it can be done, the feature request probably has a very low prio which is totally ok with me.