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: }).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.Header>{}'s Profile</UI.Header>
        <Loader loaded={this.state.loaded}>
          <UI.Profile model={this.state.profile} />

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 *