Async Getter as a State Machine Pattern

components.my-component\.js

import Component from '@glimmer/component';
import { tracked } from "@glimmer/tracking";
import { cached } from "ember-cached-decorator-polyfill";

async function fetchData(searchTerm) {
  const data = [];
  for (let i = 0; i < 10; i++) {
     data.push({
       name: `Term: <${searchTerm}> search result ${i + 1}`,
     });
  }
  return Promise.resolve(data);
}

class Request {
  // 0: initial
  // 1: loading
  // 2: result
  @tracked status = 0;
  @tracked result = null;
}

export default class extends Component {
  // key requests by term
  // handy for perf
  requestMap = new Map();
  
  @cached
  get searchResults() {
  	const { requestMap } = this;
    const { searchTerm } = this.args;
    let request = requestMap.get(searchTerm);
    
    if (!request) {
      this.fetchSearchResults(this.args.searchTerm);
      request = requestMap.get(searchTerm);
    }

    return request.result;
  }
  
  async fetchSearchResults(searchTerm) {
    let request = this.requestMap.get(searchTerm);

    if (request === undefined) {
       request = new Request();
       this.requestMap.set(searchTerm, request);
    }

    request.status = 1;
    const data = await fetchData(searchTerm);
    request.result = data;
    request.status = 2;

    return data;
  }
}

controllers.application\.js

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

export default class ApplicationController extends Controller {
  @tracked
  appName = 'Ember Twiddle';

  @action
  updateAppName(event) {
    this.appName = event.target.value;
  }
}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
<label>
Enter App Name
<input
  value={{this.appName}}
  {{on "input" this.updateAppName}}
 />
</label>
<hr>
<h2>Component Demo</h2>
<MyComponent @searchTerm={{this.appName}} />
<br>
{{outlet}}
<br>
<br>

templates.components.my-component\.hbs

<ul>
{{#each this.searchResults as |result|}}
  <li>{{result.name}}</li>
{{/each}}
</ul>

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",
    "ember-cached-decorator-polyfill": "0.1.4"
  }
}