Loading.jsx

require('./Loading.sass');

import React from 'react';
import classNames from 'classnames';

import { VelocityTransitionGroup } from 'velocity-react';

/**
 * The Loading component should be used if your content needs to wait on data from the server before being rendered.
 *
 * The loading component will show a spinner when it has no children. Once the component has children, they will be shown instead.
 *
 * Todo:
 *
 * - Add our own design
 * - Special Loaders for lists / buttons?
 */

const Loading = React.createClass({
  propTypes: {
    /**
     * custom class name to add to the component.
     */
    className: React.PropTypes.string,
    /**
     * If a node is passed to children it will be shown instead of the loading spinner.
     */
    children: React.PropTypes.node
  },

  componentDidUpdate: function() {
    console.log(`content width: ${this.refs.content.offsetWidth}`);
  },

  render: function() {
    const classes = classNames('Loading', this.props.className);

    let children;

    if (this.props.children) {
      children = (
        <div className="LoadedContent" key="loaded" ref="content">
          {this.props.children}
        </div>
      );
    } else {
      children = (
        <div className="LoadingSpinner" key="loading" ref="content">
          <div className="dot1"/>
          <div className="dot2"/>
          <div className="dot3"/>
        </div>
      );
    }

    return (
      <VelocityTransitionGroup
        enter={{
          animation: {
            opacity: 1
          },
          style: {
            opacity: 0
          }
        }}
        leave={{
          animation: {
            opacity: 0
          }
        }}
        component="div"
        className={classes}
      >
        {children}
      </VelocityTransitionGroup>
    );
  }
});

export default Loading;

Loading.sass

@import ../variables

.Loading
  position: relative
  width: 100%
  height: 100%

  .LoadingSpinner, .LoadedContent
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0

  .LoadingSpinner
    display: flex
    align-items: center
    justify-content: center

    > div
      display: inline-block

      width: $grid
      height: $grid

      border-radius: 50%

      margin-right: $grid/3

      background-color: $primary

      animation: loading 1.7s infinite ease-in-out both

      &.dot1
        animation-delay: -0.60s
      &.dot2
        animation-delay: -0.40s
      &.dot3
        animation-delay: -0.20s

@keyframes loading
  0%, 80%, 100%
    transform: scale(0)
    opacity: 0
  40%
    transform: scale(1.0)
    opacity: 1