Ember Concurrency Demo

components.github-user-search.js

import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';
import { isBlank }  from '@ember/utils';

const DEBOUNCE_MS = 250;
const API_URL = 'https://api.github.com/search/users?q=';

export default Ember.Component.extend({
  searchUsers: task(function * (term) {
    if (isBlank(term)) { return []; }
    yield timeout(DEBOUNCE_MS);
    let fetchResponse = yield fetch(`${API_URL}${term}`);
    let json = yield fetchResponse.json();
    return json.items;
  }).restartable()
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
});

templates.application.hbs

{{github-user-search}}

templates.components.github-user-search.hbs

<!-- app/components/github-user-search/template.hbs -->
<input type="text" oninput={{perform searchUsers value="target.value"}}
       placeholder="Search user on GitHub" />

{{#if searchUsers.isRunning}}
  Loading...
{{/if}}

<ul>
  {{#each searchUsers.lastSuccessful.value as |user|}}
    <li>
        <img src="{{user.avatar_url}}" width="50" />
        {{user.login}}
    </li>
  {{/each}}
</ul>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-concurrency": "0.8.22"
  }
}