Angular show loading animation when resolving FIRST component

Question

I implemented a loading animation that shows a spinner reacting on Angular's router events (NavigationStart, NavigationEnd) which works good. But the first component that is initially called and which may have a resolver that fetchs data from an API sometimes need more than 2s for loading. But I don't get any router events, so the loading animation does not show. Also when the component is resolved there are no events on router.. any ideas how to implement a loading indicator for the first called component?

Check this flow:

AppComponent is bootstrapped
After AppComponent is loaded the loading animation from index.html is gone (that's good)
Routing determines which component to load.
Resolver for that component starts to fetch data from API.

5. No loading animation is shown because router does not emit any events at this time.

Resolver is done and component is loaded.
Switch component through routing.

8. Router emits event (loading animation is shown)

Note: I also got a loading animation in my index.html of course but that's not what I am looking for...

It's not a question about code examples, it's more generous. Thank you! — , May 15 '19 at 16:51
Ok... use lifecycle hooks then. Start the animation in the component's `OnInit` and end it in the callback from the API request. — The Head Rush, May 15 '19 at 16:56
Did you ever work with resolvers? Data is resolved before the component is initialized.. — , May 15 '19 at 19:42

score 0 · Answer 1 · answered May 16 '19 at 11:17

0

The following was the fix:

The router-outlet has an Output (activate)="activate($event)" which I could use to hide the extra loading info.

answered May 16 '19 at 11:17

Angular show loading animation when resolving FIRST component

1 Answers1