Loading on change route

[DanieleRosada]

Good morning, I have a problem with router, I don't know wich child route is navigating, because isNavigating only changes in appRoute. I can't use a spinner in the right <router-view routing-loading-animation></router-view> I created this automatic customAttribute in order to use it everywhere and have a user friendly interface. I searched in all fields where I could think of, to no avail.

Has anyone created something similar yet? Thanks

import { autoinject, BindingEngine, customAttribute, Disposable, transient } from 'aurelia-framework';
import { Router, AppRouter } from 'aurelia-router';

@customAttribute('routing-loading-animation')
@autoinject()
@transient()
export class RoutingLoadingAnimationCustomAttribute {

private subscription: Disposable;
private loader: HTMLElement;

private style: string = `
.loading { 
  opacity: 0.5; 
} 

.loader, .loader:after { 
  border-radius: 50%; 
  width: 10em; 
  height: 10em; 
} 

.centered { 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  z-index: 100000; 
  margin: auto; 
  position: absolute; 
} 

.alert { 
  width: 90px; 
  height: 90px; 
  fill: #f44336; 
} 

.loading div.loader { 
  font-size: 10px; 
  text-indent: -9999em; 
  border-top: 1.1em solid #03a9f4; 
  border-right: 1.1em solid #03a9f4; 
  border-bottom: 1.1em solid #03a9f4; 
  border-left: 1.1em solid #ffffff; 
  -webkit-transform: translateZ(0); 
  -ms-transform: translateZ(0); 
  transform: translateZ(0); 
  -webkit-animation: load8 1.1s infinite linear; 
  animation: load8 1.1s infinite linear; 
} 

@-webkit-keyframes load8 { 
  0% { 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
  } 
  100% { 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
  } 
} 

@keyframes load8 { 
  0% { 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg);
  } 
  100% { 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
  } 
} `;
bindingContext: any;

constructor(private element: Element, private be: BindingEngine, private appRouter: AppRouter, private router: Router) {
  (this.element as HTMLElement).style.position = "relative";
  let stylesheet = document.createElement('style');
  stylesheet.innerHTML = this.style;
  this.element.appendChild(stylesheet);
}

bind(bindingContext: any) {
  this.bindingContext = bindingContext;
}

attached() {
  this.subscription = this.be.propertyObserver(this.appRouter, 'isNavigating').subscribe(() => {
    setTimeout(() => { console.error(this.router); debugger }, 0)
    if (this.appRouter.isNavigating) this.On();
    else this.Off();
  });
}

On() {
  if (this.element) {
    this.element.classList.add("loading");
    this.loader = document.createElement("div");
    this.loader.classList.add("loader", "centered");
    this.element.appendChild(this.loader);
  }
}

Off() {
  if (this.element && this.loader) {
    this.element.classList.remove("loading");
    this.loader.remove();
  }
}

detached() {
  this.subscription.dispose();
}

}

[bigopon]

Maybe you can get the current navigation instruction from appRouter and figure out the name of the route?

[DanieleRosada]

The only field in AppRouter that identifies the next istruction is history.fragment, but it is not unique.