promise-rendering

components.-get-pkmn\.js

import Component from '@glimmer/component';
import fetch from 'fetch';

export default class GetPkmnComponent extends Component {
  get getPokemon() {
    let { model, forceReject } = this.args;
    return fetch(`//pokeapi.co/api/v2/pokemon/${model}`).then(function(response) {
       return new Promise((resolve, reject) => {
        setTimeout(() => {
          if (!forceReject && response.ok) {
            resolve(response.json());
          }
          reject("Oulalah!");
        }, 500);
      });
    });
  }
}

components.demo-concurrency\.js

import GetPkmnComponent from './-get-pkmn';
import { task } from 'ember-concurrency';

export default class DemoConcurrency extends GetPkmnComponent {
  taskPokemon = task(function*() {
    yield this.getPokemon();
  });
}

components.demo-edc\.js

import GetPkmnComponent from './-get-pkmn';

export default class DemoEdc extends GetPkmnComponent {

}

components.demo-native\.js

import GetPkmnComponent from './-get-pkmn';

export default class DemoNative extends GetPkmnComponent {

}

components.demo-proxy\.js

import GetPkmnComponent from './-get-pkmn';
import { computed } from '@ember/object'
import ObjectProxy from '@ember/object/proxy';
import PromiseProxyMixin from '@ember/object/promise-proxy-mixin';

const ObjectPromiseProxy = ObjectProxy.extend(PromiseProxyMixin)

export default class DemoProxy extends GetPkmnComponent {
  @computed('model', 'forceReject', 'getPokemon')
  get proxy() {
    let promise = this.getPokemon
    return ObjectPromiseProxy.create({
      promise
    })
  }
}

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 value = 132;
  @tracked forceReject = false;

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

  @action
  updateReject(event) {
    this.toggleProperty("forceReject");
  }
}

templates.application\.hbs

<label>
  Pokemon ID:
  <input value={{this.value}} {{on "keyup" this.updateValue}} type="number" min="1" max="807" />
</label>

<label>
  Fake Reject?
  <input value={{this.forceReject}} {{on "click" this.updateReject}} type="checkbox" />
</label>

<hr>

<h1><a href="https://github.com/danmcclain/ember-deferred-content" target="_blank" rel="noopener noreferrer">ember-deferred-content</a></h1>
<DemoEdc @model={{this.value}} @forceReject={{this.forceReject}} />

<hr>

<h1><a href="http://ember-concurrency.com/docs/introduction/" target="_blank" rel="noopener noreferrer">ember-concurrency</a></h1>
<DemoConcurrency @model={{this.value}} @forceReject={{this.forceReject}} />

<hr>

<h1><a href="https://api.emberjs.com/ember/release/classes/PromiseProxyMixin" target="_blank" rel="noopener noreferrer">Ember PromiseProxyMixin</a></h1>
<DemoProxy @model={{this.value}} @forceReject={{this.forceReject}} />

<hr>

<h1><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank" rel="noopener noreferrer">Manage promise natively</a></h1>
<DemoNative @model={{this.value}} @forceReject={{this.forceReject}} />

templates.components.demo-concurrecy\.hbs

{{#if this.taskPokemon.last.isSuccessful}}
  <PokemonDetail @model={{this.taskPokemon.last.value}} />
{{/if}}
{{#if this.taskPokemon.last.isError}}
  Could not load pokemon
{{/if}}

templates.components.demo-edc\.hbs

{{#deferred-content this.getPokemon as |d|}}
  {{#d.settled}}
    <h2>Result:</h2>
  {{/d.settled}}
  {{#d.pending}}
    <SpinnerFrozen />
  {{/d.pending}}
  {{#d.fulfilled as |pkmn|}}
    <PokemonDetail @model={{pkmn}} />
  {{/d.fulfilled}}
  {{#d.rejected as |reason|}}
    Could not load pokemon: {{reason}}
  {{/d.rejected}}
{{/deferred-content}}

templates.components.demo-native\.hbs

{{yield}}

templates.components.demo-proxy\.hbs

{{#if proxy.isSettled}}
  <h2>Result:</h2>
{{/if}}
{{#if proxy.isPending}}
  <SpinnerFrozen />
{{/if}}
{{#if proxy.isFulfilled}}
  <PokemonDetail @model={{proxy.content}} />
{{/if}}
{{#if proxy.isRejected}}
  Could not load pokemon: {{proxy.reason}}
{{/if}}

templates.components.pokemon-detail\.hbs

<h3 style="text-transform:capitalize">{{this.model.name}}</h3>
<img src="https://raw.githubusercontent.com/msikma/pokesprite/master/icons/pokemon/regular/{{this.model.name}}.png" alt={{this.model.name}} />

templates.components.spinner-frozen\.hbs

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; none repeat scroll 0% 0%; display: block;" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="rotate(0 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#93dbe9">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(30 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#93dbe9">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(60 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#93dbe9">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(90 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#93dbe9">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(120 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#93dbe9">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(150 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#93dbe9">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(180 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#93dbe9">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(210 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#93dbe9">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(240 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#93dbe9">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(270 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#93dbe9">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(300 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#93dbe9">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(330 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#93dbe9">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
  </rect>
</g>
</svg>

tests.test-helper\.js

import Application from '../app';
import config from '../config/environment';
import { setApplication } from '@ember/test-helpers';
import { assign } from '@ember/polyfills';
import { start } from 'ember-qunit';

let attributes = {
  rootElement: '#test-root',
  autoboot: false
};
attributes = assign(attributes, config.APP);

let application = Application.create(attributes);
setApplication(application);

start();

twiddle\.json

{
  "version": "0.17.0",
  "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.3.1/jquery.js",
    "ember": "3.16.3",
    "ember-template-compiler": "3.16.3",
    "ember-testing": "3.16.3"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-fetch": "7.0.1",
    "ember-deferred-content": "1.0.0",
    "ember-concurrency": "1.1.6"
  }
}