Display element dynamically on HttpClient requests - aurelia

Question

I want to display a loader for every fetch done by my app, preventing the user from submiting the same request multiple times. For this I changed the HttpClient configuration to intercept the requests and responses during configuration in main.ts
let httpClient = new HttpClient();
httpClient.configure(config => {
config.withInterceptor({
request(request) {
// displayLoader();
return request;
},
response(response) {
// hideLoader();
return response;
},
});
});​
If it was plain js I would do something like document.body.appendChild... but Aurelia doens't let me do that.
Is there a way to display a custom view dynamically, without changing the route or having to insert a new loading view on every component that is doing a request?
Also if you have a better approach for this problem I'm open to suggestions.

Answer 1

Here's an option that might work for you. In your main.js, have something that looks like this:
import {HttpClient} from 'aurelia-fetch-client';
import {EventAggregator} from 'aurelia-event-aggregator';
export function configure(aurelia) {
const container = aurelia.container;
const httpClient = container.get(HttpClient);
const ea = container.get(EventAggregator);
httpClient.configure(config => {
config.withInterceptor({
request(request) {
ea.publish('http-request', request);
return request;
},
response(response) {
ea.publish('http-response', response);
return response;
}
});
});
aurelia.use
.standardConfiguration()
.developmentLogging()
.singleton(HttpClient, httpClient);
aurelia.start().then(() => aurelia.setRoot());
}
Then, in app.js or whatever you are using for your app's root page. Have something like this:
import {inject} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';
#inject(EventAggregator)
export class App {
displayLoader = false;
constructor(ea) {
this.ea = ea;
ea.subscribe('http-request', () => this.displayLoader = true);
ea.subscribe('http-response', () => this.displayLoader = false );
}
...
Then simply use databinding w/if.bind="displayLoader" or show.bind="displayLoader" in app.html.