1 | services | dog-data.ts

import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class DogDataService extends Service {
  @tracked data: IDog = null;
  @tracked status: Status = Status.loading;
  @tracked error: Error = null;

  constructor() {
    super(...arguments);

    this.loadDogs();
  }

  get isLoading() {
    return this.status === Status.loading;
  }

  get didError() {
    return this.status === Status.error;
  }

  get isLoaded() {
    return this.status === Status.loaded;
  }

  // usually we would use ember-concurrency for this
  // http://ember-concurrency.com/docs/introduction
  private async loadDogs() {
    try {
      const asyncMockApiFn = async (): Promise<IDog> =>
        await new Promise(resolve => setTimeout(() => resolve(DATA), 1000));

      const data = await asyncMockApiFn();

      this.data = data;
      this.error = null;
      this.status = Status.loaded;
    } catch (error) {
      this.data = null;
      this.error = error;
      this.status = Status.error
    }
  }
}

2 | components | profile.ts

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

import DogDataService from '../services/dog-data';

export default class Profile extends Component {
  @service declare readonly dogData: DogDataService;
}

3 | components | profile.hbs

<div>
  <h1 class="//...">Profile</h1>
  <div class="mt-10">
    {{#if this.dogData.isLoaded}}
      <ProfileCard @data={{this.dogData.data}} />
    {{/if}}
    {{#if this.dogData.didError}}
      <Error @errorMessage={{this.dogData.error}} />
    {{/if}}
    {{#if this.dogData.isLoading}}
      <Loader @isInherit={{true}} />
    {{/if}}
  </div>
</div>