diff --git a/src/components/App/index.js b/src/components/App/index.js index 096e198..a9794d5 100644 --- a/src/components/App/index.js +++ b/src/components/App/index.js @@ -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
- + { loading && } - + { loadingError &&

An error occurred while rendering the regular expression.

Retry -
+
} - + { Render && } ; } }