// app/components/my-component.js
import Ember from 'ember';

const {
  Component,
  Logger,
  ObjectProxy,
  PromiseProxyMixin,
  computed
} = Ember;

const Wrapper = ObjectProxy.extend(PromiseProxyMixin);

export default Component.extend({
  wrapper: computed('delayedValue', {
    get() {
      let promise = this.get('delayedValue');
      let wrapper = Wrapper.create({promise});
      // Stop an unhandled promise error because we handle the error in the
      // template.
      wrapper.catch(() => {});
      return wrapper;
    }
  })
});

{{! app/templates/components/my-component.hbs }}

{{#if wrapper.isPending}}
  Loading…
{{else if wrapper.isRejected}}
  Error: {{wrapper.reason}}
{{else}}
  {{! The actual object is in content but the properties are proxied and
  accessible directly without diving into content. }}
  Value: {{wrapper.content}}
{{/if}}