Glimmer component is not getting updated

1

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>
2

Hmm. I’m not sure what’s going wrong—this Twiddle has exactly that code (except that I removed the font-awesome stuff in favor of just text), and it seems to work as expected. You might check to make sure that the action being passed in is wired up correctly. :thinking:

3

How can I check if it is up correctly?

4

What does your invocation of the component to look like, and what is the backing class for the component or controller for that template?

5

I’m using it in a route template: Files · master · GISCollective / Frontend / web-frontend · GitLab

6

Ah, very good! Since the code is open source I’ll pull it down and see if I can make sense of the error and write it up here!

1 Like
7

Okay, I pulled it down and unfortunately I’m not sure how to run the whole app, but I’ve confirmed by writing a couple unit tests that the component itself works correctly. I’ve opened a merge request with those tests, and as I noted there, my current best guess is that the network response is happening fast enough that you’re just not actually seeing it, at least for local testing.