Adding module loading flow
This commit is contained in:
parent
8187865f1f
commit
abe7879b08
@ -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>;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user