исправления кнопок при поиске

src/search-results.js

@@ -4,6 +4,7 @@ import TorrentLine from './torrent'
 import {List, ListItem} from 'material-ui/List';
 import Subheader from 'material-ui/Subheader';
 import Divider from 'material-ui/Divider';
+import LinearProgress from 'material-ui/LinearProgress';
 
 export default class SearchResults extends Component {
   render() {
@@ -29,7 +30,7 @@ export default class SearchResults extends Component {
 	      	null
 	      }
 	      {
-	      	this.props.moreTorrentsEnabled
+	      	this.props.moreTorrentsEnabled && !this.props.moreTorrentsIndicator
 	      	?
 	      	<div>
 	      		<ListItem innerDivStyle={{textAlign: 'center', padding: '1em'}} primaryText={<span>More Torrents</span>} onClick={() => {
@@ -41,6 +42,15 @@ export default class SearchResults extends Component {
 	      	:
 	      	null
 	      }
+	      {
+	      	this.props.moreTorrentsIndicator
+	      	?
+	      	<div style={{padding: '0.8em'}}>
+	      		<LinearProgress mode="indeterminate" />
+	      	</div>
+	      	:
+	      	null
+	      }
 	      {
 	      	this.props.filesSearchResults && this.props.filesSearchResults.length > 0
 	      	?
@@ -53,7 +63,7 @@ export default class SearchResults extends Component {
 	      	null
 	      }
 	      {
-	      	this.props.moreFilesEnabled
+	      	this.props.moreFilesEnabled && !this.props.moreFilesIndicator
 	      	?
 	      	<div>
 	      		<ListItem innerDivStyle={{textAlign: 'center', padding: '1em'}}  primaryText='More Files' onClick={() => {
@@ -65,6 +75,15 @@ export default class SearchResults extends Component {
 	      	:
 	      	null
 	      }
+	      {
+	      	this.props.moreFilesIndicator
+	      	?
+	      	<div style={{padding: '0.8em'}}>
+	      		<LinearProgress mode="indeterminate" />
+	      	</div>
+	      	:
+	      	null
+	      }
       </List>
     );
   }

src/search.js

@@ -18,7 +18,9 @@ export default class Search extends Component {
     this.state = { 
       searchingIndicator: false,
       safeSearchText: 'safe search enabled',
-      safeSearchColor: 'rgb(0, 188, 212)'
+      safeSearchColor: 'rgb(0, 188, 212)',
+      moreTorrentsIndicator: false,
+      moreFilesIndicator: false,
     }
     this.searchLimit = 10
   }
@@ -74,6 +76,8 @@ export default class Search extends Component {
     }));
   }
   moreTorrents() {
+    this.setState({moreTorrentsIndicator: true});
+
     window.torrentSocket.emit('searchTorrent', this.currentSearch, {
         index: this.searchTorrents.length,
         limit: this.searchLimit, 
@@ -84,7 +88,7 @@ export default class Search extends Component {
         if(torrents.length != this.searchLimit)
           this.moreSearchTorrents = false;
 
-        this.forceUpdate();
+        this.setState({moreTorrentsIndicator: false});
       }
     }));
   }
@@ -95,6 +99,8 @@ export default class Search extends Component {
         index += torrent.path.length;
     });
 
+    this.setState({moreFilesIndicator: true});
+
     window.torrentSocket.emit('searchFiles', this.currentSearch, {
         index: index,
         limit: this.searchLimit, 
@@ -110,7 +116,7 @@ export default class Search extends Component {
         if(files != this.searchLimit)
           this.moreSearchFiles = false;
 
-        this.forceUpdate();
+        this.setState({moreFilesIndicator: false});
       }
     }));
   }
@@ -204,10 +210,12 @@ export default class Search extends Component {
           torrentsSearchResults={this.searchTorrents} 
           filesSearchResults={this.searchFiles}
           
-          moreTorrentsEnabled={this.moreSearchTorrents}
-          moreFilesEnabled={this.moreSearchFiles}
+          moreTorrentsEnabled={this.moreSearchTorrents && !this.state.searchingIndicator}
+          moreFilesEnabled={this.moreSearchFiles && !this.state.searchingIndicator}
           onMoreTorrents={() => this.moreTorrents()}
           onMoreFiles={() => this.moreFiles()}
+          moreTorrentsIndicator={this.state.moreTorrentsIndicator}
+          moreFilesIndicator={this.state.moreFilesIndicator}
         />
       </div>
     );