1 | index.hbs

<Async @trigger={{this.asyncThing}} as |async|>
  <div>{{async.current.value}}</div>
  <button
    type="button"
    class="
      p-2 bg-gray-200 cursor-pointer rounded-md focus:outline-none
      {{if async.isBusy "cursor-not-allowed"}}
    "
    {{on "click" async.trigger}}
  >
    click
  </button>
</Async>

2 | async.js

import Component from '@glimmer/component';

import { action } from '@ember/object';

import { useMachine } from 'ember-statecharts';
import { use } from 'ember-usable';

import async from './async/-machine';

function noop() {}

export default class Async extends Component {
  @use statechart = useMachine(async).withContext({
    trigger: this.args.trigger,
    onSuccess: this.args.onSuccess || noop,
    onError: this.args.onError || noop,
  });

  get isIdle() {
    return this.statechart.state.matches('idle');
  }

  get isBusy() {
    return this.statechart.state.matches('busy');
  }

  get didSucceed() {
    return this.statechart.state.matches('success');
  }

  get didError() {
    return this.statechart.state.matches('error');
  }

  @action
  trigger() {
    this.statechart.send('DO');
  }
}

3 | async.hbs

{{yield (hash
  trigger=this.trigger
  current=this.statechart.state
  isBusy=this.isBusy
  isIdle=this.isIdle
  didSucceed=this.didSucceed
  didError=this.didError
)}}