подгрузка визуально

src/app.js

@@ -16,10 +16,16 @@ import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 
 let loadersCount = 0;
 let appReady = false;
-window.customLoader = (func) => {
+window.customLoader = (func, onLoading, onLoaded) => {
 	loadersCount++;
+	if(onLoading) {
+		onLoading();
+	}
 	return (...args) => {
 		func(...args);
+		if(onLoaded) {
+			onLoaded();
+		}
 		loadersCount--;
 	}
 };

src/recent-torrents.js

@@ -6,6 +6,7 @@ import Subheader from 'material-ui/Subheader';
 import Paper from 'material-ui/Paper';
 import Divider from 'material-ui/Divider';
 import FlatButton from 'material-ui/FlatButton';
+import RefreshIndicator from 'material-ui/RefreshIndicator';
 
 const TorrentLine = (props) => {
   const torrent = props.torrent;
@@ -169,13 +170,16 @@ export default class RecentTorrents extends Component {
   	this.displayQueue = [];
     this.displayQueueAssoc = {};
     this.maxDisplaySize = 1000;
-  	this.state = { pause: false }
+  	this.state = { 
+      pause: false,
+      searchingIndicator: false
+   }
   }
   componentDidMount() {
   	window.torrentSocket.emit('recentTorrents', window.customLoader((data) => {
   		if(data) {
   			this.torrents = data;
-  			this.forceUpdate();
+  			//this.forceUpdate(); // вызывается через searchingIndicator
   		}
 
   		this.displayNewTorrent = () => {
@@ -206,6 +210,14 @@ export default class RecentTorrents extends Component {
         setTimeout(this.displayNewTorrent, speed);
 	  	}
       this.displayNewTorrent();
+  	}, () => {
+      this.setState({
+        searchingIndicator: true
+      });
+    }, () => {
+      this.setState({
+        searchingIndicator: false
+      });
     }));
   	this.newTorrentFunc = (torrent) => {
       if(this.displayQueue.length < this.maxDisplaySize) {
@@ -239,6 +251,28 @@ export default class RecentTorrents extends Component {
   		delete this.displayNewTorrent;
   }
   render() {
+    const style = {
+      refresh: {
+        display: 'inline-block',
+        position: 'relative',
+      },
+    };
+
+    if(this.state.searchingIndicator) {
+      return (
+        <div className='pad1'>
+          <RefreshIndicator
+            size={50}
+            left={0}
+            top={0}
+            loadingColor="#FF9800"
+            status="loading"
+            style={style.refresh}
+          />
+        </div>
+      );
+    }
+
     if(!this.torrents || this.torrents.length == 0)
       return null;
 

src/torrent-page.js

@@ -14,6 +14,7 @@ import FileFolder from 'material-ui/svg-icons/file/folder';
 import NoImage from './images/no-image-icon.png'
 
 var moment = require('moment');
+import RefreshIndicator from 'material-ui/RefreshIndicator';
 
 let buildFilesTree = (filesList) => {
 	let rootTree = {
@@ -124,6 +125,7 @@ export default class TorrentPage extends Page {
     super(props);
     this.state = {
       value: 'info',
+      searchingIndicator: false
     };
     this.setTitle('Information about torrent');
   }
@@ -143,13 +145,21 @@ export default class TorrentPage extends Page {
   		if(data) {
   			this.torrent = data
   			this.setTitle('Download ' + this.torrent.name);
-  			this.forceUpdate();
+  			//this.forceUpdate(); // вызывается через searchingIndicator
 
   			// Получаем более новую статистику пира
   			if((new Date).getTime() - this.torrent.trackersChecked > 10 * 60 * 1000) {
   				window.torrentSocket.emit('checkTrackers', this.torrent.hash);
   			}
   		}
+  	}, () => {
+      this.setState({
+        searchingIndicator: true
+      });
+    }, () => {
+      this.setState({
+        searchingIndicator: false
+      });
     }));
   	this.trackerUpdate = (info) => {
       if(this.props.hash != info.hash)
@@ -168,6 +178,28 @@ export default class TorrentPage extends Page {
       window.torrentSocket.off('trackerTorrentUpdate', this.trackerUpdate);
   }
   render() {
+  	const style = {
+      refresh: {
+        display: 'inline-block',
+        position: 'relative',
+      },
+    };
+
+    if(this.state.searchingIndicator) {
+      return (
+        <div className='pad1 w100p column center'>
+          <RefreshIndicator
+            size={50}
+            left={0}
+            top={0}
+            loadingColor="#FF9800"
+            status="loading"
+            style={style.refresh}
+          />
+        </div>
+      );
+    }
+
     return (
       <div className="w100p">
       {