First pass at a LoadRecords component

component.js

import Component from '@ember/component';
import { task } from 'ember-concurrency';
import { inject as service } from '@ember/service';

export default Component.extend({

  tagName: '',

  store: service(),

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

    this.query.perform();
  },

  query: task(function*() {
    let params = { ...this.params };

    if (this.backgroundReload !== undefined) {
      params.backgroundReload = this.backgroundReload;
    }

    return yield this.store.loadRecords(this.modelName, params);
  })

});

template.hbs

{{yield
  this.query.isRunning
  this.query.last.error
  this.query.last.value
}}

usage.hbs

<div class="bg-grey-lightest py-5">
  {{#ui-container}}
    {{#ui-title style='center marginless'}}
      Recent episodes
    {{/ui-title}}

    <LoadRecords
      @modelName='podcast-episode'
      @params={{hash
        sort='-position'
        page=(hash limit=4)
      }}
      @backgroundReload={{false}}
    as |isLoading isError latestEpisodes|>

      {{#if latestEpisodes}}
        <Grid @columns='lg:3' @gutters='lg:3' as |grid|>
          {{#each (take 3 (without model latestEpisodes)) as |episode|}}
            <grid.Column>
              <Podcast::Components::PodcastCard @episode={{episode}} />
            </grid.Column>
          {{/each}}
        </Grid>

        <div class="mt-5">
          <p class='text-center'>
            or {{#link-to 'podcast' class='text-black font-semibold'}}View all episodes{{/link-to}}
          </p>
        </div>
      {{/if}}

    </LoadRecords>

  {{/ui-container}}
</div>