Aurelia Dialog: Show Wait Spinner During Async Activate

Question

I'm using aurelia-dialog to display details of an account.

All the examples I've seen of aurelia-dialog involve passing an entire object to the dialog and using that object as the viewmodel for the dialog. What I want to do is pass the ID and run an AJAX call to get the detail data.

It's simple enough to get that working, but then when I return a promise from the activate call on the dialog's viewmodel, the dialog doesn't display at all until the promise is resolved. That's a bummer, because there's a delay.

I'd like the dialog to display right away and to show a spinner until the promise resolves. Is there a simple way to do this? Has anyone seen or done this?

Answer 1

the dialog doesn't display at all until the promise is resolved that's the intended design you can not return anything and it will show. In this case you would just flag something when the promise is resolved.

export class MyDialogVM {
  showSpinner = false;
  // ...
  activate(id) {
    this.showSpinner = true;
    this.http.get(`/my-api/${id}`).then(result => {
      this.showSpinner = false;
    });
  }
}

And your dialog view

<template>
  <!-- other stuff -->
  <i class="fa fa-spinner fa-spin" show.bind="showSpinner"></i>
  <!-- other stuff -->
</template>