React.lazy loads HyloEditorMobile and moves it above our routing setu…

…p allowing it to code-split with minimum dependencies

src/index.js

@@ -1,11 +1,24 @@
-import React from 'react'
+import React, { Suspense } from 'react'
 import ReactDOM from 'react-dom'
 import { rootDomId } from 'client/util'
-import App from './router'
+import Loading from 'components/Loading'
+
 import './client/websockets'
 import './css/global/index.scss'
 
+const App = React.lazy(() => import('./router'))
+const HyloEditorMobile = React.lazy(() => import('components/HyloEditor/HyloEditorMobile'))
+
 ReactDOM.render(
-  <App />,
+  window.location.pathname === '/hyloApp/editor'
+    ? (
+      <Suspense fallback={() => null}>
+        <HyloEditorMobile />
+      </Suspense>
+    ) : (
+      <Suspense fallback={() => <Loading type='fullscreen' />}>
+        <App />
+      </Suspense>
+    ),
   document.getElementById(rootDomId)
 )

src/router/index.js

@@ -1,13 +1,11 @@
 import React from 'react'
 import { ConnectedRouter } from 'connected-react-router'
-import { Switch, Route } from 'react-router'
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 import { Provider } from 'react-redux'
 import { LayoutFlagsProvider } from 'contexts/LayoutFlagsContext'
 import createStore, { history } from '../store'
 import RootRouter from 'routes/RootRouter'
-import HyloAppRouter from 'routes/HyloAppRouter'
 
 const store = createStore()
 
@@ -19,10 +17,7 @@ export default function App () {
       <DndProvider backend={HTML5Backend}>
         <Provider store={store}>
           <ConnectedRouter history={history}>
-            <Switch>
-              <Route path='/hyloApp' component={HyloAppRouter} />
-              <RootRouter />
-            </Switch>
+            <RootRouter />
           </ConnectedRouter>
         </Provider>
       </DndProvider>