What We’re Building

What you see when you open the Slack app

We’re going to create a few things:

A loading message component

A custom computed property macro (CPM) for randomly choosing an item from an array (e.g. Ruby’s Array#sample)

CSS for animating the ellipsis

The Component

The component itself is fairly simple – we’re setting a tag name and some classes (I’m using animate.css to fade the message in), as well as some loading messages and text. In addition, we accept a simple boolean property to show or hide the random loading messages, as sometimes we might only want the ‘Loading…” text to appear. The only thing of interest here is the computedSample CPM, which is defined in a little utility file.

A Custom Computed Property Macro

Here, we’re creating a new computed property macro for sampling an array and returning a random item.

What this function does is return an Ember.computed function that’s observing each item in some dependentKey (an array), then accessing a random index on that array. The prototype method volatile tells Ember not to cache the return value, so we get a unique loading message each time the app enters the loading route (even without a hard refresh).

Animating the ellipsis in CSS

The above lets us animate the opacity of each individual dot in the ellipsis. Using sibling selectors, we can easily apply a different delay to each dot, and then have the keyframes repeat infinitely.

Using the component

The template for the component.

The loading template that’s rendered in the loading route.

The Final Product

The finished product

In Closing

Ember makes front end development such a joy. I hope you’ve enjoyed how easy it is to add Slack-like loading messages into your app!