DEV Community

Angular: How to easily display loading indicators

John Carroll on July 02, 2019

A common task for Angular applications is showing a loading indicator during page navigation, or showing a loading indicator while POSTing data to ...

Read full post

Stephen Haney • Mar 14 '22

I am fairly new to Angular (coming from a .net C# background). I have been looking for a pretty clean loading pattern and yours looks like its well conceived and built. The one question I had is that I'd like to to manipulate the inner contents of sw-is-loading-spinner vs just doing a straight css solution. How would you recommend going about that? Would I just create a directive? Appreciate it!

John Carroll • Mar 15 '22

Oh interesting. Are you saying that you'd like to provide your own component to act as the loading spinner? Currently that's not a supported feature, but I think it would be easy to add. If you open a feature request in the repo, I might be able to do it this week. I think all that would need to happen is update ISWIsLoadingDirectiveConfig to accept a spinner component class and then have IsLoadingDirective use that instead of the default IsLoadingSpinnerComponent.

Stephen Haney • Mar 15 '22

Initially I was thinking it'd be nice to have it inject my own component as I want contemplating some more context-specific logic to adjust spinner size and animations to use if its a button (and then some logic branching if its an icon button vs non-icon) or just some random div. Perhaps the config could have an optional IsLoadingSpinnerComponent where I could just reference my own component.

I ended up getting 99% of the way there using CSS and just having very specific selector patterns to branch logic so its not a huge deal but I can enter a feature request in the repo. Thanks!

John Carroll • Mar 23 '22

FYI in case you missed it, I replied to the feature request you opened with a followup question.

mhagnumdw • Feb 24 '20

Hi! Another question. I'm trying to understand all of your logic...

If this.isLoadingService.add receive an Observable you subscribe to it, here. And the same input Observable is returned.

And in your example, you subscribe again within your component, here: <profile-component *ngFor="let user of users | async" [user]='user'>

The observable is executed twice. Or did I miss something? Can you explain me?

Tks!!

John Carroll • Feb 25 '20

The observable is executed twice

Yup. The observable is subscribed to twice. Once by the isLoadingService, and once by the async pipe in the component's template.

mhagnumdw • Feb 25 '20

If it is a heavy http request you will be doing this twice, unless you use a sharereplay(1) or a ReplaySubject(1). If it is a request to create a record...
Well, what I mean is that we may have a problem here, right?

Thanks again!

John Carroll • Feb 25 '20

If it is a heavy http request you will be doing this twice, unless you use a shareReplay(1) or a ReplaySubject(1)

Depends on the observable.

Well, what I mean is that we may have a problem here, right?

I can't answer that for you. I'm not familiar with your project. If you're unsure how to use observables, you can always just stick to promises (or transform observables to promises with toPromise()).

I'll note that Angular's HttpClient returns observables which complete after the request resolves. If you're using it, this isn't something you need to worry about.

cname87 • Sep 18 '19 • Edited

Very nice I'm using it and it's sweet.

BTW, it appears that an observable returned from fn, as passed in isLoadingService.add(fn), must be asynchronous i.e. in a fail mode I was passing 'of([])' instead of an httpClient observable and it didn't remove the loading indicator, whereas when I pass in 'scheduled(of([]), asapScheduler' it did.

John Carroll • Sep 19 '19 • Edited

Thanks! I'm pretty happy with how much it's cleaned up my code.

Also, that sounds like a bug. Can you open an issue in gitlab.com/service-work/is-loading ?

cname87 • Sep 19 '19

Will do

John Carroll • Sep 19 '19

Great bug report. Fixed in v3.0.2. gitlab.com/service-work/is-loading...

mhagnumdw • Feb 16 '20 • Edited

Great! Thanks for the detailed explanation!

A question, taking a snippet of your example here:

<button
    swIsLoading='create-user'
    (click)='submit()' >

It is possible, unintentionally, swIsLoading to have a key and the submit function to add a different key. Another thing, besides your strategy being very good, there is still an effort to define the same key in swIsLoading and in the submit function.

Have you ever thought of a directive called, for example, clickProgress that receives a function or an Observable? And nothing more than that. Do you think it is a good strategy?

[(clickProgress)]="arrowFunctionHere" key="create-user"

[(clickProgress)]="anyObservable" key="create-user"

Again, thank you very much!

John Carroll • Feb 18 '20 • Edited

It is possible, unintentionally, swIsLoading to have a key and the submit function to add a different key.

Is this an actual problem you are running into? This hasn't been a problem for me.

Another thing, besides your strategy being very good, there is still an effort to define the same key in swIsLoading and in the submit function.

No, defining the key twice is a feature, it's not simply an implementation detail. It's enforcing a separation of concerns. You're treating the submit() function like it's tied to the view when it's not. submit() can be called elsewhere and it still will trigger the "create-user" loading state. Similarly, the view's "create-user" loading state can also be triggered by other means (not just the submit() function).

Put another way, the button's loading indicator is triggered by the "create-user" loading state. It is not triggered by the submit() function (though, in this case, the submit() function happens to trigger the "create-user" loading state). Tying the button's loading state specifically to the submit() function would be undesirable.

Regardless, it sounds like you might be interested in the Angular Promise Buttons library, which has a less abstract button loading indicator solution that might appeal to you.