Prototype React.lazy/Suspense and code splitting

app/javascript/packs/frontend/app.jsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, {lazy, Suspense} from 'react';
 import {BrowserRouter, Route, Link, Switch} from 'react-router-dom';
 import {hot} from 'react-hot-loader/root';
 
 import ApplicationLayout from './components/layout/application_layout';
 
-import Pokemon from './components/pages/pokemon';
-import NotFound from './components/pages/not_found';
-import TestComponent from './components/test_component';
+const Pokemon = lazy(() => import('./components/pages/pokemon'));
+const NotFound = lazy(() => import('./components/pages/not_found'));
+const TestComponent = lazy(() => import('./components/test_component'));
 
 import './assets/stylesheets/app.scss';
 
@@ -14,18 +14,20 @@ class App extends React.Component {
   render() {
     return (
       <BrowserRouter>
-        <ApplicationLayout>
-          <Switch>
-            <Route exact path="/" component={TestComponent} />
-            <Route path="/pokemon" component={Pokemon} />
+        <Suspense fallback={<div>Loading...</div>}>
+          <ApplicationLayout>
+            <Switch>
+              <Route exact path="/" component={TestComponent} />
+              <Route path="/pokemon" component={Pokemon} />
 
-            <Route component={NotFound} />
-          </Switch>
+              <Route component={NotFound} />
+            </Switch>
 
-          <p>
-            <Link to="/pokemon">Show me the pokemon!</Link>
-          </p>
-        </ApplicationLayout>
+            <p>
+              <Link to="/pokemon">Show me the pokemon!</Link>
+            </p>
+          </ApplicationLayout>
+        </Suspense>
       </BrowserRouter>
     );
   }

app/javascript/packs/frontend/components/pages/pokemon.jsx

@@ -1,20 +1,22 @@
-import React from 'react';
+import React, {lazy, Suspense} from 'react';
 import {Route, Switch} from 'react-router-dom';
 
-import PokemonShow from './pokemon/show';
-import PokemonIndex from './pokemon/index';
+const PokemonShow = lazy(() => import('./pokemon/show'));
+const PokemonIndex = lazy(() => import('./pokemon/index'));
 
 import NotFound from './not_found';
 
 function Pokemon({match}) {
   return (
     <>
-      <Switch>
-        <Route exact path={`${match.path}/:id`} component={PokemonShow} />
-        <Route exact path={`${match.path}`} component={PokemonIndex} />
+      <Suspense fallback={<div>Loading...</div>}>
+        <Switch>
+          <Route exact path={`${match.path}/:id`} component={PokemonShow} />
+          <Route exact path={`${match.path}`} component={PokemonIndex} />
 
-        <Route component={NotFound} />
-      </Switch>
+          <Route component={NotFound} />
+        </Switch>
+      </Suspense>
     </>
   );
 }