0

I played with the Angular animations (fade in, fade out, etc..) but I want to display a custom loading spinner when changing from one route to another : List of products TO detail of a product (and the way back).

The spinner would have to fit in the whole <router-outlet></router-outlet> container while the route is changing.

I did not find how to achieve that by using ONLY the animations. Is is possible please ? I only

I do something similar, but for the app loading (not for a route changing), with this code :

<app-root>
  <div class="app-loading">
    <div class="logo"></div>
    <svg class="spinner" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
    </svg>
  </div>
</app-root>

Actually, I do a workaround by displaying a message while the data is being retrieved from the API. Like this :

<div class="col-12" *ngIf="loadingEvents">
  <div class="alert alert-info"><i class="fa fa-spinner fa-pulse" aria-hidden="true"></i>Loading events</div>
</div>

And the logic inside the HTTP client in the component.

But, this is not a loading spinner between route changing, it is a spinner while doing HTTP request when I am already in the next route. So, this is a code that is inside the component logic. I do not want that. I want the same concept as animations.

fallais
  • 577
  • 1
  • 8
  • 32
  • Are there resolvers attached to your routes, or lazy modules? Otherwise the route change is immediate – Guerric P Apr 10 '19 at 12:41
  • Btw I have a pending question about that. It may be interest you: https://stackoverflow.com/questions/54135784/how-to-implement-a-global-loader-in-angular-7-1 – Guerric P Apr 10 '19 at 12:43
  • Check about httpinterceptors.. – Guruprasad J Rao Apr 10 '19 at 12:44
  • You need a HttpInterceptor, ii you want to use this approach I can provide an answer – NicuVlad Apr 10 '19 at 12:49
  • @YoukouleleY : I am sorry but I do not understand the question :( I work with Angular, not AngularJS. So I do all the fetching in the `ngOnInit()`. Is it the answer your looking for ? And thanks for the link, I am reading at it. – fallais Apr 10 '19 at 13:05
  • @GuruprasadRao and @NicuVlad : I do not get how HttpInterceptor can help me here. All I need a loading spinner to fit in the whole `` container while the route is changing. Thanks a lot ! – fallais Apr 10 '19 at 13:07
  • an Http Interceptor is "invoked" whenever you "fetch" using your http client (which you obviously do other wise routes would show up instantly and you wouldn't be asking this question). anywhere on your application. from there you can "show" a certain component (maybe a modal one) whenever an HTTP request is still undergoing. read more at [Angular documentation](https://angular.io/api/common/http/HttpInterceptor) – Stavm Apr 10 '19 at 13:14
  • Oh I see, in fact, I already does that while I am waiting to do better, I did not say it. Let me add it in the question. – fallais Apr 10 '19 at 13:16
  • @Stavm : I updated the question. – fallais Apr 10 '19 at 13:20
  • what you posted has nothing to do with interceptors, please make sure you understand what we're suggesting, google about interceptors, they're truly powerful. – Stavm Apr 10 '19 at 13:22
  • @Stavm : I am reading – fallais Apr 10 '19 at 13:26
  • @NicuVlad : Maybe you answer could help me to understand how it works – fallais Apr 10 '19 at 13:26
  • But, simply, as I asked in the question, is it possible to use the `animations` to display my spinner when I `:enter` and `:leave` from a route to another ? Instead of using them to fade out and fade in the whole container. – fallais Apr 10 '19 at 13:29

1 Answers1

0

An interceptor detects when a request is executed. From your example I understand that a request is executed: List of products TO detail of a product.

You can follow this article to implement an interceptor for your article: https://medium.com/@zeljkoradic/loader-bar-on-every-http-request-in-angular-6-60d8572a21a9

Regarding the type of the loader, I would not use a spinner, maybe some request will be executed very fast so you will see only a blink. Maybe you can use the same like in the article.

NicuVlad
  • 2,491
  • 3
  • 28
  • 47
  • Very interesting, let me try it to see if it gives satisfaction, thanks a lot. – fallais Apr 10 '19 at 13:41
  • Good luck. I tested the code form the article and it works. – NicuVlad Apr 10 '19 at 13:43
  • The only thing is that I also have a contact form, I would not like the Interceptor to work in this kind of requests.. – fallais Apr 10 '19 at 13:51
  • Well, it is working, but as I do not use `Resolvers`, the route is changing very quickly, and the data retrieving is done in the `ngOnInit()`. So that does not give me the UX feeling I wanted. That is why I wanted to know if I can do it with real Angular animations. – fallais Apr 10 '19 at 15:06
  • I'm not sure but also if you use animations the duration will be the same. I think you can use a timeout in the interceptor to introduce a delay. – NicuVlad Apr 11 '19 at 05:49
  • The main aim I can see in animation is that it is made for doing something between two routes. That is exactly what I want to use. But as far as I can read at the documentation, we can only play with fade in and fade out (I am simplifying..) but what if I want to display a loading spinner ? Can I use `.hidden` and `.show` on my spinner `div` with animations ? That is my question :) – fallais Apr 11 '19 at 09:10