Aurelia event won't fire on first page load -

i'm using aurelia's eventaggregator publish , subscribe events in app. of custom elements take while load, i've used loading event tell main app.js add spinner page during loading.

this works fine once app has loaded , start switching between routes, however, on first page load event doesn't seem fire - or @ least, isn't picked subscribe method.

here's app.js does:

attached () {     this.mainloadingsubscription = this.eventaggregator.subscribe('main:loading', isloading => {         // if main loading         if (isloading) {             document.documentelement.classlist.add('main-loading');         }         // stopped loading         else {             document.documentelement.classlist.remove('main-loading');         }     }); } 

and here's custom elements do:

constructor () {     this.eventaggregator.publish('main:loading', true); }  attached () {     this.dosomeasyncaction.then(() => {         this.eventaggregator.publish('main:loading', false);     }); } 

this causes first page load not show spinner , instead page looks kind of broken.

btw, aware of fact can return promise element's attached method can't because of this other problem

set subscriptions in viewmodel's constructor or activate callback

in above example, set subscriptions in viewmodel's attached() callback. unfortunately, not called until child custom element's attached() callbacks called, long after 1 custom element's constructor() function called.

try this:

app.js

@inject(eventaggregator) export class appviewmodel {      constructor(eventaggregator) {         this.mainloadingsubscription = eventaggregator.subscribe('main:loading', isloading => {             // thing         }     } } 

if viewmodel route can navigated to, handle in activate() callback appropriate teardown in deactivate() callback.

@inject(eventaggregator) export class appviewmodel {      constructor(eventaggregator) {         this.eventaggregator = eventaggregator;     }      activate() {         this.mainloadingsubscription = this.eventaggregator.subscribe('main:loading', isloading => {             // thing         }     }      deactivate() {         this.mainloadingsubscription.dispose();     } }