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 ( +
+ +
+ ); + } + if(!this.torrents || this.torrents.length == 0) return null; diff --git a/src/torrent-page.js b/src/torrent-page.js index 15f9047..657791f 100644 --- a/src/torrent-page.js +++ b/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,14 +145,22 @@ 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) return; @@ -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 ( +
+ +
+ ); + } + return (
{