consul/ui/packages/consul-ui/app/components/data-loader/index.hbs

{{yield}}
<StateChart @src={{chart}} as |State Guard Action dispatch state|>
  <Ref @target={{this}} @name="dispatch" @value={{dispatch}} />
  <Guard @name="loaded" @cond={{action "isLoaded"}} />


{{#let (hash
  data=data
  error=error
  invalidate=(action "invalidate")
  dispatchError=(queue (action (mut error) value="error.errors.firstObject") (action dispatch "ERROR"))
) as |api|}}

    {{#yield-slot name="data"}}
      {{yield api}}
    {{else}}
      {{! if we didn't specify any data}}
      {{#if (not items)}}
        {{! try and load the data if we aren't in an error state}}
        <State @notMatches={{array "error" "disconnected" "invalidating"}}>
          {{! but only if we only asked for a single load and we are in loading state}}
          {{#if (and src (or (not once) (state-matches state "loading")))}}
            <DataSource
              @open={{open}}
              @src={{src}}
              @onchange={{queue (action "change" value="data") (action dispatch "SUCCESS")}}
              @onerror={{api.dispatchError}}
            />
          {{/if}}
        </State>
      {{/if}}
    {{/yield-slot}}

  <State @matches="loading">
    {{#yield-slot name="loading"}}
      {{yield api}}
    {{else}}
      <Consul::Loader />
    {{/yield-slot}}
  </State>

  <State @matches="error">
    {{#yield-slot name="error"}}
      {{yield api}}
    {{else}}
      <ErrorState @error={{error}} />
    {{/yield-slot}}
  </State>

  <State @matches={{array "idle" "disconnected" "invalidating"}}>

    <State @matches="disconnected">
      {{#if (not (eq error.status '401'))}}
        {{#yield-slot name="disconnected" params=(block-params (action dispatch "RESET"))}}
            {{yield api}}
        {{else}}
          <Notice
            {{notification
              sticky=true
            }}
            class="notification-update"
            @type="warning"
          as |notice|>
            <notice.Header>
              <strong>Warning!</strong>
            </notice.Header>
            <notice.Body>
              <p>
                An error was returned whilst loading this data, refresh to try again.
              </p>
            </notice.Body>
          </Notice>
        {{/yield-slot}}
      {{/if}}
    </State>
    {{#if (eq error.status "403")}}
      {{#yield-slot name="error"}}
        {{yield api}}
      {{else}}
        <ErrorState @error={{error}} />
      {{/yield-slot}}
    {{else}}
      <YieldSlot @name="loaded">
        {{yield api}}
      </YieldSlot>
    {{/if}}

  </State>

{{/let}}
  {{did-update (fn dispatch "LOAD") src=src}}
</StateChart>