Glimmer component is not getting updated

Hi everyone!

I am trying to make a simple button that shows a spinner until the promise returned by the action is resolved. I’m updating the tracked values in the action, but I can’t see any changes in the rendered component. Is there something that I am missing?

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default class InputButtonComponent extends Component {
  @tracked isWaiting;
  @tracked isError;

  @action
  handleAction() {
    if(!this.args.action) {
      return;
    }

    this.isWaiting = true;
    this.isError = false;

    return this.args.action().then(() => {
      this.isWaiting = false;
    }).catch(() => {
      this.isWaiting = false;
      this.isError = true;
    });
  }
}

<button ...attributes {{on "click" this.handleAction}}>
  {{#if this.isWaiting}}
    <FaIcon @icon="spinner" @spin={{true}} />
  {{/if}}

  {{#if this.isError}}
    <FaIcon @icon="exclamation-triangle" />
  {{/if}}

  {{yield}}
</button>

3 posts - 2 participants

Read full topic