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;

  handleAction() {
    if(!this.args.action) {

    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 this.isError}}
    <FaIcon @icon="exclamation-triangle" />


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:

How can I check if it is up correctly?

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

I’m using it in a route template:

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

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.