When the user clicks a link, and the response is not immediate, it is a good idea to show an animation. For instance, in a weather app the user clicks a link to show the weather for tomorrow and the app has to query one or two APIs. While the resolver is waiting for the data to complete the user is left all alone and confused. A loading animation clears the confusion.

I found myself having a lot of links like 30 or so in a list. So where do you show the loading animation? If the user is on mobile, not much more than links will be visible on the screen. If the loading animation appears above the list of links, all the user will see is the links suddenly jumping down, while placing it below the user would have to scroll down to see it. The ideal place should be right below the clicked link.

There are a lot of ways to solve this. In my case I didn't want to use CSS and z-index, which may be the first idea that comes to mind. Instead, I created a component for the link which takes the link (the url) as input. The loading animation is placed inside this component, just below the link. And here comes the clever part, since you have access to the link, you can feed that to the loading animation. The loading animation subscribes to the router, so it knows where the navigation is going. And if that is the same place as the link, show the animation.
Code will be posted shortly.