Slack-like loading messages in an Ember app

computed-properties.js

var computed;

App.computed = {};

computed = Ember.computed;

App.computed.sample = function(dependentKey) {
  return (computed("" + dependentKey + ".@each", function() {
    var items, length;
    items = this.getWithDefault(dependentKey, Em.A([]));
    length = items.get('length');
    return items[Math.floor(Math.random() * length)] || '';
  })).volatile();
};

loading-message.hbs

{{loadingText}}
<i class="ellipsis">
  <i>.</i>
  <i>.</i>
  <i>.</i>
</i>

{{#if showLoadingMessages}}
  <small>{{randomLoadingMessage}}</small>
{{/if}}

loading-message.js

App.LoadingMessageComponent = Ember.Component.extend({
  tagName:              'h1',
  classNames:           ['loading', 'animated', 'fadeIn'],
  showLoadingMessages:  false,
  randomLoadingMessage: App.computed.sample('loadingMessages'),
  
  loadingText: Em.computed(function() {
    return 'Loading';
  }),
  
  loadingMessages: [
    'A day without sunshine is like, you know, night.', 
    'My fake plants died because I did not pretend to water them.', 
    'Weather forecast for tonight: dark.'
  ]
});

loading.hbs

<div class="loading-wrapper">
  {{loading-message showLoadingMessages=true}}
</div>

loading.scss

.loading {
  position: relative;
  text-align: center;
  margin: {
    left: auto;
    right: auto;
  };
  small {
    display: block;
    line-height: 1.3em;
    margin: 10px auto 0 auto;
    max-width: 80%;
    text-align: center;
  }
}

.loading-wrapper > h1.loading {
  position: fixed;
  top: 40%;
  left: 0;
  right: 0;
}

i.ellipsis i {
  font-style: normal;
  opacity: 0;
  -webkit-animation: dot 1.3s infinite;
  -webkit-animation-delay: 0s;
  -moz-animation: dot 1.3s infinite;
  -moz-animation-delay: 0s;
  -o-animation: dot 1.3s infinite;
  -o-animation-delay: 0s;
  animation: dot 1.3s infinite;
  animation-delay: 0s;
}

i.ellipsis i+i {
  opacity: 0;
  -webkit-animation: dot 1.3s infinite;
  -webkit-animation-delay: 0.2s;
  -moz-animation: dot 1.3s infinite;
  -moz-animation-delay: 0.2s;
  -o-animation: dot 1.3s infinite;
  -o-animation-delay: 0.2s;
  animation: dot 1.3s infinite;
  animation-delay: 0.2s;
}

i.ellipsis i+i+i {
  opacity: 0;
  -webkit-animation: dot 1.3s infinite;
  -webkit-animation-delay: 0.3s;
  -moz-animation: dot 1.3s infinite;
  -moz-animation-delay: 0.3s;
  -o-animation: dot 1.3s infinite;
  -o-animation-delay: 0.3s;
  animation: dot 1.3s infinite;
  animation-delay: 0.3s;
}

@-webkit-keyframes dot {
  0%, 50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@-moz-keyframes dot {
  0%, 50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@-o-keyframes dot {
  0%, 50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@keyframes dot {
  0%, 50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Great! Just one quick question. How do I determine Ember initial loading state?