Adding module loading flow

This commit is contained in:
Jeff Avallone 2019-01-12 12:49:49 -05:00
parent 8187865f1f
commit abe7879b08

View File

@ -1,16 +1,49 @@
import React from 'react';
import * as Sentry from '@sentry/browser';
import { AppContextProvider } from 'components/AppContext';
import Form from 'components/Form';
import Loader from 'components/Loader';
import Message from 'components/Message';
import Render from 'components/Render';
class App extends React.PureComponent {
state={}
state = {
loading: false,
loadingError: null,
Render: null
}
handleRender = ({ syntax, expr }) => {
this.setState({ syntax, expr });
handleRender = async ({ syntax, expr }) => {
this.setState({
syntax,
expr,
loading: true,
loadingError: null,
Render: null
});
try {
const Render = await import(
/* webpackChunkName: "render-[index]" */
'components/Render' // TODO: Import syntax-specific render component
);
// HACK: Fake loading time
await new Promise(resolve => setTimeout(resolve, 2000));
this.setState({
loading: false,
Render: Render.default
});
}
catch (e) {
Sentry.captureException(e, { syntax });
this.setState({
loading: false,
loadingError: e
});
throw e;
}
}
handleRetry = event => {
@ -19,17 +52,23 @@ class App extends React.PureComponent {
}
render() {
const {
loading,
loadingError,
Render
} = this.state;
return <AppContextProvider onExpressionChange={ this.handleRender }>
<Form />
<Loader />
{ loading && <Loader /> }
<Message type="error" heading="Render Failure">
{ loadingError && <Message type="error" heading="Render Failure">
<p>An error occurred while rendering the regular expression.</p>
<a href="#retry" onClick={ this.handleRetry }>Retry</a>
</Message>
</Message> }
<Render />
{ Render && <Render /> }
</AppContextProvider>;
}
}