diff --git a/src/app.js b/src/app.js index 65b1ead..ed733c6 100644 --- a/src/app.js +++ b/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--; } }; diff --git a/src/recent-torrents.js b/src/recent-torrents.js index cacadd7..0547a47 100644 --- a/src/recent-torrents.js +++ b/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,7 +210,15 @@ 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) { this.displayQueue.push(torrent); @@ -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 ( +