sarsoo/Mixonomer
1
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

fixed playlist component loading

Browse Source
This commit is contained in:
aj 2020-01-27 21:40:23 +00:00
parent 47f758bd90
commit e2b2c4a16b
2 changed files with 13 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/js/Playlist/View/Count.js
View File

@ -1,7 +1,9 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { ThemeProvider, Typography } from "@material-ui/core";
const axios = require('axios'); const axios = require('axios');
import showMessage from "../../Toast.js" import showMessage from "../../Toast.js"
import GlobalTheme from "../../Theme";
const LazyPieChart = React.lazy(() => import("../../Maths/PieChart")) const LazyPieChart = React.lazy(() => import("../../Maths/PieChart"))
@ -64,9 +66,7 @@ class Count extends Component {
} }
render() { render() {
const loadingMessage = <ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider>;
return ( return (
<React.Suspense fallback={<loadingMessage/>}>
<tbody> <tbody>
<tr> <tr>
<td className="ui-text center-text text-no-select">Scrobble Count: <b>{this.state.playlist.lastfm_stat_count.toLocaleString()} / {this.state.playlist.lastfm_stat_percent}%</b></td> <td className="ui-text center-text text-no-select">Scrobble Count: <b>{this.state.playlist.lastfm_stat_count.toLocaleString()} / {this.state.playlist.lastfm_stat_percent}%</b></td>
@ -80,6 +80,7 @@ class Count extends Component {
<tr> <tr>
<td className="ui-text center-text text-no-select">Last Updated <b>{this.state.playlist.lastfm_stat_last_refresh.toLocaleString()}</b></td> <td className="ui-text center-text text-no-select">Last Updated <b>{this.state.playlist.lastfm_stat_last_refresh.toLocaleString()}</b></td>
</tr> </tr>
<React.Suspense fallback={<LoadingMessage/>}>
<tr> <tr>
<td> <td>
<LazyPieChart data={[{ <LazyPieChart data={[{
@ -121,10 +122,14 @@ class Count extends Component {
<button style={{width: "100%"}} className="button" onClick={this.updateStats}>Update</button> <button style={{width: "100%"}} className="button" onClick={this.updateStats}>Update</button>
</td> </td>
</tr> </tr>
</tbody>
</React.Suspense> </React.Suspense>
</tbody>
); );
} }
} }
function LoadingMessage(props) {
return <tr><td><ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider></td></tr>;
}
export default Count; export default Count;

20
src/js/Playlist/View/View.js
View File

@ -1,12 +1,8 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { ThemeProvider, Typography } from "@material-ui/core"; import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
import { BrowserRouter as Route, Link} from "react-router-dom";
import GlobalTheme from "../../Theme";
const LazyEdit = React.lazy(() => import("./Edit"))
const LazyCount = React.lazy(() => import("./Count"))
import Edit from "./Edit.js";
import Count from "./Count.js";
class View extends Component{ class View extends Component{
@ -28,18 +24,12 @@ class View extends Component{
</th> </th>
</tr> </tr>
</thead> </thead>
<React.Suspense fallback={<LoadingMessage/>}> <Route path={`${this.props.match.url}/edit`} render={(props) => <Edit {...props} name={this.props.match.params.name}/>} />
<Route path={`${this.props.match.url}/edit`} render={(props) => <LazyEdit {...props} name={this.props.match.params.name}/>} /> <Route path={`${this.props.match.url}/count`} render={(props) => <Count {...props} name={this.props.match.params.name}/>} />
<Route path={`${this.props.match.url}/count`} render={(props) => <LazyCount {...props} name={this.props.match.params.name}/>} />
</React.Suspense>
</table> </table>
); );
} }
} }
function LoadingMessage(props) {
return <ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider>;
}
export default View; export default View;