индикатор поиска

src/search.js

@@ -3,12 +3,24 @@ import React, { Component } from 'react';
 import SearchResults from './search-results'
 import TextField from 'material-ui/TextField';
 import RaisedButton from 'material-ui/RaisedButton';
+import RefreshIndicator from 'material-ui/RefreshIndicator';
 
 export default class Search extends Component {
+  constructor(props)
+  {
+    super(props)
+    this.state = { searchingIndicator: false }
+  }
+
   search() {
+    this.setState({
+      searchingIndicator: true
+    });
     window.torrentSocket.emit('search', this.searchValue, (torrents) => {
       this.searchData = torrents;
-      this.forceUpdate();
+      this.setState({
+        searchingIndicator: false
+      });
     });
   }
   componentDidMount() {
@@ -18,6 +30,13 @@ export default class Search extends Component {
     });
   }
   render() {
+    const style = {
+      refresh: {
+        display: 'inline-block',
+        position: 'relative',
+      },
+    };
+
     return (
       <div className="column w100p center">
         <div className='row inline w100p pad0-75' style={{maxWidth: '30em'}}>
@@ -44,6 +63,22 @@ export default class Search extends Component {
             :
             null
         }
+        {
+          this.state.searchingIndicator
+          ?
+          <div className='pad1'>
+            <RefreshIndicator
+              size={50}
+              left={0}
+              top={0}
+              loadingColor="#FF9800"
+              status="loading"
+              style={style.refresh}
+            />
+          </div>
+          :
+          null
+        }
         <SearchResults results={this.searchData} />
       </div>
     );