Slack-style Loading Messages in an Ember App
If you haven’t used Slack already, it’s an awesome chat app for teams that’s similar to IRC. I’ve been using it for a while now, and I’ve pretty much sworn off writing emails for internal communication in favour of Slack.
One little interaction that I particularly enjoy is the random loading message that appears every time you load the app – it’s a nice little touch that makes the app feel just a little bit more human and fun.
Because Ember is well designed for asynchronous routing, it’s really easy to add application loading messages by making use of the little known global loading route that you get for free. Let’s get started!
What We’re Building
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
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!
For more Ember.js posts, follow my two collections on Medium:
