DEV Community

Discussion on: Loading indication in Angular

n_mehlhorn profile image
Nils Mehlhorn Author

Interesting, but that would give you global indication again, right? You couldn't realiably use it for the 'Creating, please wait'-part as some other request might also cause the loading.

Another suggestion: it'd probably be good to get rid of the function call in the template loadingService.isLoading$(). Its usually called everytime change detection runs. As you've already got observables there, it shouldn't be that hard - you could probably transfer the method arguments into something that's operator based.

johncarroll profile image
John Carroll • Edited on

Ya I noticed my original comment was getting really long so I cut short the details, but you can call IsLoadingService#add() with an optional key argument which allows you to trigger separate loading indicators (though in practice, I've only ever used this option once or twice).

isLoadingService.add(subscription, {key: 'my-key'})

isLoadingService.isLoading$({key: 'my-key'})

Regarding the function call in the template, I thought about that but, in testing, decided removing it was a solution in search of a problem. The function is merely returning a cached value and, even running every change detection cycle, is very performant. If it is ever shown to be a problem I'll certainly address it, but, at the moment, I'm skeptical that any change would be an improvement.

I could imagine the function call might be a problem if you were rendering hundreds (maybe dozens) of loading indicators on the screen at once, but I think this scenario would only occur if you were using dynamic key values to, for example, show which rows in a spreadsheet were loading. This scenario is already not supported.