async component

Author: vinsproduction

app/commons/AsyncComponent.jsx

@@ -1,46 +1,38 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-
-class AsyncComponent extends PureComponent {
-	
-	constructor(props) {
-		super(props);
-
-		this.state = {
-			Component: null
-		};
-	}
-
-	unCamelCase(s) {
-		return s.split(/(?=[A-Z])/).join('-').toLowerCase();
-	}
-
-	componentWillMount() {
-		if (!this.state.Component) {
-			this.props.moduleProvider().then(( component ) => {
-				document.body.setAttribute('page', this.unCamelCase(component.default.name));
+import React from 'react';
+
+
+const AsyncComponent = (importComponent) => {
+
+	return class Component extends React.Component {
+
+		state = {
+			component: null,
+		}
+
+		componentDidMount() {
+
+			importComponent().then((component) => {
 				this.setState({ component: component.default });
 			});
+
+		}
+
+		render() {
+			const Component = this.state.component;
+
+			return (Component) ? (
+				<React.Fragment>
+					{Component ? <Component {...this.props} /> : null}
+				</React.Fragment>
+			) : (
+					<React.Fragment>
+						<p>Загрузка...</p>
+					</React.Fragment>
+				);
+
 		}
-	}
-
-	componentWillUnmount() {
-		document.body.removeAttribute('page');
-	}
-
-	render() {
-		const Component = this.state.component;
-		return (
-			<React.Fragment>
-				{/* {Component ? <Component {...this.props} /> : null} */}
-				{Component ? <Component /> : null}
-			</React.Fragment>
-		);
-	}
-}
-
-AsyncComponent.propTypes = {
-	moduleProvider: PropTypes.func
+	};
 };
 
+
 export default AsyncComponent;

app/index.html

@@ -0,0 +1 @@
+<div id="app"></div>

app/index.pug

@@ -2,16 +2,16 @@ import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 import AsyncComponent from '../commons/AsyncComponent';
 
-const Home = () => import('./home/Home');
-const About = () => import('./about/About');
+const Home = AsyncComponent(() => import('./home/Home'));
+const About = AsyncComponent(() => import('./about/About'));
 
 class Pages extends React.Component {
 	render() {
 		return (
 			<main>
 				<Switch>
-					<Route exact path='/' component={() => <AsyncComponent moduleProvider={Home} />} />
-					<Route path='/about' component={() => <AsyncComponent moduleProvider={About} />} />
+					<Route exact path='/' component={Home} />
+					<Route path='/about' component={About} />
 				</Switch>
 			</main>
 		);