src/js/Playlist/View/Count.js

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

src/js/Playlist/View/View.js

@@ -1,12 +1,8 @@
 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{
 
@@ -28,18 +24,12 @@ class View extends Component{
                         </th>
                     </tr>
                 </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>
         );
     }
 
 }
 
-function LoadingMessage(props) {
-    return <ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider>;
-}
-
 export default View;