How to implement a loading spinner on content change with the ASP.NET Core Angular SPA template?

Question

I just setup a toy project based on the Angular template for ASP.NET Core 2.0 in order to create a SPA for testing purposes:

• https://github.com/aspnet/JavaScriptServices/tree/dev/templates/AngularSpa
• https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/

I know that the server pre-rendering process is already making things a lot faster for a SPA but just in case of latency.

But still how to achieve this? Can it actually be fully automatized (like applicable to all the views when they are coded on the client side (!*.cshtml)) ?

Thanks

Answer 1

If you want a spinner on route changes, you can set a flag as part of the router events:

checkRouterEvent(routerEvent: Event): void {
    if (routerEvent instanceof NavigationStart) {
        this.loading = true;
    }

    if (routerEvent instanceof NavigationEnd ||
        routerEvent instanceof NavigationCancel ||
        routerEvent instanceof NavigationError) {
        this.loading = false;
    }
}

Then turn on/off a spinner based on that flag.

In the HTML:

<span class="glyphicon glyphicon-refresh glyphicon-spin spinner" *ngIf="loading"></span>

I have a working example set up here: https://github.com/DeborahK/Angular-Routing (In the APM-Final folder).