e-c: waitForProperty

application.controller.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  
}

application.route.js

import Route from '@ember/routing/route';

export default class ApplicationRoute extends Route {
  activate() {
    super.activate(...arguments);
    document.body.classList.add('standard');
  }
}

application.template.hbs

<header class="container-fluid">
  <h1>Demo: Template</h1>
</header>

<hr>

<main class="container-fluid">
	{{outlet}}
</main>

index.controller.js

import Controller from '@ember/controller';
import { get, set } from '@ember/object';
import { task, waitForProperty, timeout } from 'ember-concurrency';
import { isPresent } from '@ember/utils';

export default class IndexController extends Controller {
  
  constructor() {
    super(...arguments)
    
    this.optionsFoo = [{ t: 'foo.1' }, { t: 'foo.2' }, { t: 'foo.3' }];
    this.selectedFoo = null;
    
    this.optionsBar = [{ t: 'bar.1' }, { t: 'bar.2' }, { t: 'bar.3' }];
    this.selectedBar = null;
    
    this.optionsQux = [{ t: 'qux.1' }, { t: 'qux.2' }, { t: 'qux.3' }];
    this.selectedQux = null;
    
    this.changeSelected = task(function *(suffix, selected, dropdown) {
      const property = `selected${suffix}`;
      set(this, property, selected);
      get(this, 'waitForSelected').perform(property);
    });
    
    this.waitForSelected = task(function *(property) {
      // console.log(`before waitForProperty`, this[property]);

      yield waitForProperty(this, property, _ => true);
      yield timeout(1000);
      
      const result = isPresent(this[property])
      	? this[property]
      	: { label: '❌' };

      console.log(`after waitForProperty`, result.t);
      return result;
    });
  }

}

index.route.js

import Route from '@ember/routing/route';

export default class IndexRoute extends Route {
  
}

index.template.hbs

<!-- button onclick={{perform this.changeSelected null}} disabled={{this.waitForSelected.isRunning}}>
	Reset
</button -->

<div class="grid">
	<div class="cell -4of12">
  	{{#power-select renderInPlace=true
      options=this.optionsFoo
      selected=this.selectedFoo
      disabled=this.waitForSelected.isRunning
      onchange=(perform this.changeSelected 'Foo') as |option|}}
      {{option.t}}
    {{/power-select}}
  </div>
  <div class="cell -4of12">
    {{#power-select renderInPlace=true
      options=this.optionsBar
      selected=this.selectedBar
      disabled=this.waitForSelected.isRunning
      onchange=(perform this.changeSelected 'Bar') as |option|}}
      {{option.t}}
    {{/power-select}}
  </div>
  <div class="cell -4of12">
    {{#power-select renderInPlace=true
      options=this.optionsQux
      selected=this.selectedQux
      disabled=this.waitForSelected.isRunning
      onchange=(perform this.changeSelected 'Qux') as |option|}}
      {{option.t}}
    {{/power-select}}
  </div>
</div>

<div class="grid">
  <div class="cell -4of12">
  	<code>this.selectedFoo</code>: {{this.selectedFoo.t}}
  </div>
  <div class="cell -4of12">
  	<code>this.selectedBar</code>: {{this.selectedBar.t}}
  </div>
  <div class="cell -4of12">
  	<code>this.selectedQux</code>: {{this.selectedQux.t}}
  </div>  
</div>

styles._reboot.css

/* github.com/twbs/bootstrap/blob/v4.0.0/dist/css/bootstrap-reboot.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}

@-ms-viewport {
  width: device-width;
}

article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

dfn {
  font-style: italic;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: .5rem;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}
/*# sourceMappingURL=bootstrap-reboot.css.map */

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "hack": "//cdn.staticfile.org/hack/0.7.7/hack.css",
    "standard": "//cdn.staticfile.org/hack/0.7.7/standard.css",
    "jquery": "//cdn.staticfile.org/jquery/3.3.1/jquery.min.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-concurrency": "latest",
    "ember-concurrency-decorators": "latest",
    "ember-power-select": "latest",
    "ember-truth-helpers": "latest"
  }
}