diff --git a/src/js/Maths/Maths.js b/src/js/Maths/Maths.js
index f8f9c42..ba03ad2 100644
--- a/src/js/Maths/Maths.js
+++ b/src/js/Maths/Maths.js
@@ -1,5 +1,5 @@
import React, { Component } from "react";
-import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
+import { BrowserRouter as Route, Link} from "react-router-dom";
import Count from "./Count.js";
diff --git a/src/js/MusicTools.js b/src/js/MusicTools.js
index f1d19f4..b155da2 100644
--- a/src/js/MusicTools.js
+++ b/src/js/MusicTools.js
@@ -1,13 +1,6 @@
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
-import Index from "./Index/Index.js";
-import Maths from "./Maths/Maths.js";
-import Playlists from "./Playlist/Playlists.js";
-import PlaylistView from "./Playlist/View/View.js";
-import Settings from "./Settings/Settings.js";
-import Admin from "./Admin/Admin.js";
-
import NotFound from "./Error/NotFound.js";
import showMessage from "./Toast.js"
@@ -33,6 +26,13 @@ import { Build, PieChart, QueueMusic, ExitToApp, AccountCircle, KeyboardBackspac
const axios = require('axios');
+const LazyIndex = React.lazy(() => import("./Index/Index"))
+const LazyMaths = React.lazy(() => import("./Maths/Maths"))
+const LazyPlaylists = React.lazy(() => import("./Playlist/Playlists"))
+const LazyPlaylistView = React.lazy(() => import("./Playlist/View/View"))
+const LazySettings = React.lazy(() => import("./Settings/Settings"))
+const LazyAdmin = React.lazy(() => import("./Admin/Admin"))
+
class MusicTools extends Component {
constructor(props){
@@ -88,7 +88,7 @@ class MusicTools extends Component {
- Music Tools
+ Music Tools
@@ -137,25 +137,28 @@ class MusicTools extends Component {
-
+
-
-
-
-
- { this.state.type == 'admin' && }
-
+ }>
+
+
+
+
+ { this.state.type == 'admin' && }
+
+
-
);
}
}
+function LoadingMessage(props) {
+ return Loading...;
+}
+
export default MusicTools;
\ No newline at end of file
diff --git a/src/js/Playlist/NewPlaylist.js b/src/js/Playlist/NewPlaylist.js
index c98088e..ca53a22 100644
--- a/src/js/Playlist/NewPlaylist.js
+++ b/src/js/Playlist/NewPlaylist.js
@@ -1,5 +1,4 @@
import React, { Component } from "react";
-import { BrowserRouter as Redirect } from "react-router-dom";
const axios = require('axios');
import showMessage from "../Toast.js"
diff --git a/src/js/Playlist/Playlists.js b/src/js/Playlist/Playlists.js
index 03299dc..822a01e 100644
--- a/src/js/Playlist/Playlists.js
+++ b/src/js/Playlist/Playlists.js
@@ -1,6 +1,5 @@
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
-const axios = require('axios');
import PlaylistsView from "./PlaylistsView.js"
import NewPlaylist from "./NewPlaylist.js";
diff --git a/src/js/Playlist/PlaylistsView.js b/src/js/Playlist/PlaylistsView.js
index a6367bb..f7d40c2 100644
--- a/src/js/Playlist/PlaylistsView.js
+++ b/src/js/Playlist/PlaylistsView.js
@@ -95,18 +95,18 @@ class PlaylistsView extends Component {
render() {
- const table = ;
- const loadingMessage = loading... ;
+ const loadingMessage = Loading...;
- return this.state.isLoading ? loadingMessage : table;
+ return this.state.isLoading ? loadingMessage : grid;
}
}
-function Table(props){
+function PlaylistGrid(props){
return (
No Playlists
) : (
- props.playlists.map((playlist) => )
@@ -131,24 +131,23 @@ function Table(props){
);
}
-function Row(props){
+function PlaylistCard(props){
return (
-
-
-
- { props.playlist.name }
-
-
- {/* */}
-
-
-
-
-
-
-
-
+
+
+
+ { props.playlist.name }
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/src/js/Playlist/View/Count.js b/src/js/Playlist/View/Count.js
index 40070a5..11bcffa 100644
--- a/src/js/Playlist/View/Count.js
+++ b/src/js/Playlist/View/Count.js
@@ -2,7 +2,8 @@ import React, { Component } from "react";
const axios = require('axios');
import showMessage from "../../Toast.js"
-import PieChart from "../../Maths/PieChart.js";
+
+const LazyPieChart = React.lazy(() => import("../../Maths/PieChart"))
class Count extends Component {
@@ -63,7 +64,9 @@ class Count extends Component {
}
render() {
+ const loadingMessage = Loading...;
return (
+ }>
Scrobble Count: {this.state.playlist.lastfm_stat_count.toLocaleString()} / {this.state.playlist.lastfm_stat_percent}% |
@@ -79,7 +82,7 @@ class Count extends Component {
-
-
-
|
| |
+
);
}
}
diff --git a/src/js/Playlist/View/View.js b/src/js/Playlist/View/View.js
index 1c3ed74..f92c7ab 100644
--- a/src/js/Playlist/View/View.js
+++ b/src/js/Playlist/View/View.js
@@ -1,9 +1,12 @@
import React, { Component } from "react";
-import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
-const axios = require('axios');
+import { ThemeProvider, Typography } from "@material-ui/core";
+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{
@@ -25,12 +28,18 @@ class View extends Component{
- } />
- } />
+ }>
+ } />
+ } />
+
);
}
}
+function LoadingMessage(props) {
+ return Loading...;
+}
+
export default View;
\ No newline at end of file
diff --git a/webpack.common.js b/webpack.common.js
index 1a357b5..0a3ea8c 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -27,7 +27,9 @@ module.exports = {
],
resolve: { extensions: ["*", ".js", ".jsx"] },
output: {
- filename: '[name].bundle.js',
- path: path.resolve(__dirname, 'build/js')
+ filename: '[name].bundle.js',
+ chunkFilename: '[name].bundle.js',
+ path: path.resolve(__dirname, 'build/js'),
+ publicPath: '/build/js/'
}
};
|