Add simple route-based code splitting

src/App.scss

@@ -1,10 +1,18 @@
 @import "sass/config";
 
+.main {
+  min-height: 85vh;
+}
+
+html, body {
+  padding: 0;
+  height: 0;
+}
+
 body {
   color: white;
   background-color: #111;
   font-family: Verdana;
-  margin: 0;
 }
 
 // Normalize etc.
@@ -52,10 +60,6 @@ a {
   }
 }
 
-.index {
-  min-height: 85vh;
-}
-
 .index__class-picker {
   margin: 2em 0;
 }

src/App.tsx

@@ -1,18 +1,30 @@
 import React from 'react'
 import './App.scss'
-import { IndexRoute } from './components/IndexRoute'
-import { Playground } from './components/Playground'
 import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'
+import Loadable from 'react-loadable'
+import { PageLoader } from './components/PageLoader'
+
+const LoadableHome = Loadable({
+  loader: () => import('./containers/Home'),
+  loading: PageLoader
+})
+
+const LoadablePlayground = Loadable({
+  loader: () => import('./containers/Playground'),
+  loading: PageLoader
+})
 
 const App: React.FC = () => {
   return (
     <Router>
     {/* <Router basename={process.env.NODE_ENV !== 'development' ? '%PUBLIC_URL%' : ''}> */}
       <div className="App">
-        <Switch>
-          <Route exact path="/playground" component={Playground} />
-          <Route path="/:selectedClass?/:pointString?" component={IndexRoute} />
-        </Switch>
+        <div className="main">
+          <Switch>
+            <Route exact path="/playground" component={LoadablePlayground} />
+            <Route path="/:selectedClass?/:pointString?" component={LoadableHome} />
+          </Switch>
+        </div>
 
         <footer>
           <Link to="/">Home</Link>

src/components/PageLoader.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react'
+import { LoadingComponentProps as Props } from 'react-loadable'
+
+export const PageLoader: FC<Props> = ({ isLoading, pastDelay, error, retry, timedOut }) => {
+  const retryButton = <button onClick={retry}>retry</button>
+
+  if (error) {
+    return <div>Something went awry... do you wish to {retryButton}?</div>
+  } else if (timedOut) {
+    return <div>Taking some time... {retryButton}?</div>
+  } else if (pastDelay) {
+    return <div>Loading...</div>
+  } else {
+    return null
+  }
+}

src/containers/Home.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Calculator } from './Calculator'
-import { ClassPicker } from './ClassPicker'
+import { Calculator } from '../components/Calculator'
+import { ClassPicker } from '../components/ClassPicker'
 import { match } from 'react-router-dom'
 import { RouteComponentProps } from 'react-router'
 import { decodeKnownTalents } from '../lib/tree'
@@ -13,7 +13,7 @@ interface Props extends RouteComponentProps {
   }>
 }
 
-export class IndexRoute extends React.PureComponent<Props> {
+export default class Home extends React.PureComponent<Props> {
   static whyDidYouRender = true
 
   componentDidMount() {

src/containers/Playground.tsx

@@ -1,13 +1,13 @@
 import './Playground.scss'
 import React, { FC } from 'react'
-import { ClassPicker } from './ClassPicker'
+import { ClassPicker } from '../components/ClassPicker'
 import { RouteComponentProps } from 'react-router'
-import { Icon } from './Icon'
-import { Tooltip } from './Tooltip'
-import { Talent } from './Talent'
+import { Icon } from '../components/Icon'
+import { Tooltip } from '../components/Tooltip'
+import { Talent } from '../components/Talent'
 import { talentsById } from '../data/talents'
 import { Map } from 'immutable'
-import { SpellTooltip } from './SpellTooltip';
+import { SpellTooltip } from '../components/SpellTooltip';
 import classNames from 'classnames'
 
 interface Props extends RouteComponentProps {
@@ -48,7 +48,7 @@ const Section: FC<any> = (props) => {
   </div>
 }
 
-export class Playground extends React.PureComponent<Props> {
+export default class Playground extends React.PureComponent<Props> {
   static whyDidYouRender = true
 
   state = {