Derived async manager

components.example-manager\.js

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

const tasks = new WeakMap();

class Task {
  @tracked isLoading = true;
  @tracked lastError;
  @tracked result;
  
  constructor(example) {
    this.example = example;
    this.perform();
  }

  @action
  async perform() {
    this.isLoading = true;
    try {
      this.result = await this._fake();
    } catch (error) {
      this.lastError = error;
      throw error;
    } finally {
      this.isLoading = false;
    }
    this.lastError = null;
    return this.result;
  }

  async _fake() {
    await new Promise(r => setTimeout(r, 1000));
    if (Math.random() > 0.6) {
      throw new Error('bork');
    } else {
      return `foo ${this.example.name} bar`;
    }
  }

  static find(example) {
    if (!tasks.has(example)) {
      tasks.set(example, new Task(example));
    }
    return tasks.get(example);
  }
}

export default class extends Component {
  get task() {
    return Task.find(this.args.example);
  }
}

controllers.application\.js

import Controller from '@ember/controller';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

const examples = [
  { id: 'example-1', name: 'Example 1' },
  { id: 'example-2', name: 'Example 2' },
  { id: 'example-3', name: 'Example 3' },
  { id: 'example-4', name: 'Example 4' },
  { id: 'example-5', name: 'Example 5' },
];

export default class ApplicationController extends Controller {
  examples = examples;
  @tracked currentExample = examples[0];

  get isSelected() {
    return { [this.currentExample.id]: true };
  }
  
  @action
  updateExample({ target }) {
    let [option = {}] = target.selectedOptions;
    this.currentExample = examples.findBy('id', option.value);
  }
}

templates.application\.hbs

<p>
  <select {{on "change" this.updateExample}}>
    {{#each this.examples as |example|}}
      <option value={{example.id}} selected={{get this.isSelected example.id}}>{{example.name}}</option>
    {{/each}}
  </select>
</p>

<p>
  <ExampleManager @example={{this.currentExample}} as |manager|>
    {{#if manager.isLoading}}
      <div>Loading&hellip;</div>
    {{else if manager.error}}
      <div>
        {{manager.error}}
        <button type="button" {{on "click" manager.reload}}>Try again</button>
      </div>
    {{else}}
      <div>
        Result: {{manager.result}}
        <button type="button" {{on "click" manager.reload}}>Refresh</button>
      </div>
    {{/if}}
  </ExampleManager>
</p>

templates.components.example-manager\.hbs

{{yield (hash
  isLoading=this.task.isLoading
  error=this.task.lastError
  result=this.task.result
  reload=this.task.perform
)}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}