Building an Open-Source Loader for React.js

This article originally appeared on Quick Left.

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!

Leave a Reply

Your email address will not be published. Required fields are marked *