Edited at

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

More than 3 years have passed since last update.

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')
);


こんな感じになるはず

capture.gif


まとめ

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