React.jsでローディング表示

React.jsをちょこちょこ触り始めました。
重いデータを非同期で取得してると、ローディング画面が欲しくなりますね。
というところで、React.jsでローディング画面実装の備忘録。
React.jsを上手く使えてないのはほっといて

サンプル

• データの取得：AWSのS3のバケットを読み込み
• ローディングアイコン：Font Awesome

1. 初回レンダリング時にはローディングを表示
2. データ取得が終了するとローディングを消す

サンプルコード

// ローディング用コンポーネント
var Loader = React.createClass({
    render: function() {
        //loadingプロパティにより処理分け
        if(this.props.isActive){
            return (
                //ローディングアイコン
                <i className="fa fa-refresh fa-spin fa-5x"></i>
            );
        } else{
            return null;
        }
    }
});

var Contents = React.createClass({
    //初期状態でloadingをtrue
    getInitialState: function() {
        return {
            loading: true,
            data: {}
        };
    },
    componentWillMount: function() {
        AWS.config.region = "REGION";
        AWS.config.update({accessKeyId: 'ACCESS_KEY_ID', secretAccessKey: 'SECRET_KEY'});
        var s3 = new AWS.S3();
        var s3ListRequst = s3.listObjects({
            Bucket: 'BUKET_NAME',
            Prefix: ''
        });

        var reactObj = this;

        //S3よりバケット内の一覧を非同期で取得
        s3ListRequst.
            on('complete', function(response) {
                //非同期通信が終わったところでloadingをfalse
                reactObj.setState({
                    loading: false,
                    data: response.data.Contents
                });
            }).
            send();
    },
    render: function() {
        var dataObj = this.state.data;
        var content = Object.keys(dataObj).map(function (key) {
            return (
                <div>{ key }</div>
            );
        });
        return (
            <div>
                //ローディング用コンポーネントにloadingを渡す
                <Loader isActive={this.state.loading} />
                { content }
            </div>
        );
    }
});

ReactDOM.render(
    <div> <Contents /> </div>,
    document.getElementById('loading')
);

こんな感じになるはず

まとめ

Font Awesome 便利すぎぃぃぃぃぃぃぃぃ