Load component

[ryanto]

{{#load-relationship post 'comments' as |loader|}}

  {{#if loader.isLoading}}
    fetching
  {{/if}}

  {{#if loader.isLoaded}}
    there are {{post.comments.length}} comments
  {{/if}}

{{/load-relationship}}

[Subtletree]

I'm using a basic version of this, no e-concurrency or anything:

export default Component.extend({
  isLoaded: false,
  isLoading: false,
  isError: false,

  didInsertElement() {
    this._super(...arguments);

    if (this.model.hasLoaded(this.relationship)) {
      this.setLoaded();
    } else {
      this.setLoading();
      this.model.load(this.relationship)
        .then(() => this.setLoaded())
        .catch((error) => this.setError(error));
    }
  },

  setLoading() {
    this.setProperties({
      isLoaded: false,
      isLoading: true,
      isError: false
    });
  },

  setLoaded() {
    this.setProperties({
      isLoaded: true,
      isLoading: false,
      isError: false
    });
  },

  setError(error) {
    this.setProperties({
      isLoaded: false,
      isLoading: false,
      isError: error
    });
  }
}).reopenClass({
  positionalParams: ['model', 'relationship']
});

Let me know if you want a PR

[ryanto]

This is now the highest priority feature in my mind! 👍 🔥

This is important because having a component to load data lets Ember developers keep their templates declarative while also allowing them to explicitly express when data is loaded and how it affects the UI.

If you want, we can start with what you have. I'd love to get this into storefront and iterate on it!

Off the top of my head we'll need to answer a few questions...

1. What is the API of this template? I've been thinking something like...

{{#load-relationship post 'comments' as |loading error data|}}
 ...
{{/load-relationship}}

2. How do we handle component tear downs given the asynchronous nature of this component? We need to guard against the component being destroyed before the ajax response comes back from the server.

There's some unknown unknowns here. As we start writing test cases for this component I'm sure we'll uncover new things!

Let me know your thoughts.