Using ember-derred-content with ember-in-viewport

component.js

import Ember from 'ember';
const {
  get,
  computed
} = Ember;

import InViewportMixin from 'ember-in-viewport';

export default Ember.Component.extend(
  InViewportMixin,
{
  classNames: ['panel'],
  stats: computed('groupMembership', function() {
    return get(this, 'groupMembership').tallyupStats(); // Using ember-api-actions (https://github.com/mike-north/ember-api-actions)
  })
});

template.hbs

{{user-avatar user=groupMembership.user}}

{{#if viewportEntered}}
  {{#deferred-content promise=stats as |d|}}
    {{#if d.isPending}}
      <div class="loading spinner"></div>
    {{/if}}
    
    {{#if d.isFulfilled}}
      {{progress-bar
        current=d.content.stats.tallyup_stats.current_month.amount
        max=groupMembership.monthlyGoalAmount}}

      <div class="big-stats-row">
        {{bigStat (numberToK d.content.stats.tallyup_stats.monthly_average) "Monthly Average"}}
        {{bigStat (numberToK d.content.stats.tallyup_stats.highest_month.amount) (concat "Highest Month" "<br/>" "(" d.content.stats.tallyup_stats.highest_month.month ")")}}
        {{bigStat (numberToK d.content.stats.tallyup_stats.ytd_total) "YTD Total"}}
      </div>
    {{/if}}
  {{/deferred-content}}
{{/if}}