Blog

Building an Open-Source Loader for React.js

While working on a mobile application for Gociety, we found that there were a handful of screens that needed to fetch data from an API endpoint before showing any details. Since we knew enough about the state of the app (e.g.: the user is viewing a profile), we were able to show the general screen UI, but we needed a way to indicate to the user that the content is loading.

To solve this, I built and open-sourced react-loader to take advantage of spin.js in the context of a React.js component. Installation and usage is trivial.

First, install the package via npm:

npm install react-loader --save

Next, simply wrap the <Loader> component around your loading content.

/** @jsx React.DOM */

var UI = require('../components/ui');
var Loader = require('react-loader');

var ProfileScreen = React.createClass({
  propTypes: {
    id: React.PropTypes.number.isRequired,
    name: React.PropTypes.string.isRequired
  },

  getInitialState: function () {
    return { loaded: false, profile: null };
  },

  componentDidMount: function () {
    new Profile({ id: this.props.id }).fetch({
      success: this.onSuccess,
      error: this.onError
    })
  },

  onSuccess: function (profile) {
    this.setState({ profile: profile, loaded: true });
  },

  onError: function (err) {
    // error handling goes here
  },

  render: function () {
    return (
      <UI.Container>
        <UI.Header>{this.props.name}'s Profile</UI.Header>

        <Loader loaded={this.state.loaded}>
          <UI.Profile model={this.state.profile} />
        </Loader>
      </UI.Container>
    );
  }
});

As long as the Loader has a loaded value of false, the spinner will render; otherwise, your encapsulated content will be displayed.

In addition, the react-loader component supports all the configuration settings that spin.js enables via component properties. For example, setting the color can be done by passing in a simple string:

<Loader loaded={false} color="#CCC" />

Check out the Github repo for more usage details, and pull requests are always welcome!