POC of code-splitting with Suspense

app/containers/FeaturePage/Loadable.js

@@ -1,10 +1,13 @@
 /**
  * Asynchronously loads the component for FeaturePage
  */
-import loadable from 'loadable-components';
 
+import React, { lazy, Suspense } from 'react';
 import LoadingIndicator from 'components/LoadingIndicator';
+const Component = lazy(() => import('./index'));
 
-export default loadable(() => import('./index'), {
-  LoadingComponent: LoadingIndicator,
-});
+export default () => (
+  <Suspense fallback={<LoadingIndicator />}>
+    <Component />
+  </Suspense>
+);

app/containers/HomePage/Loadable.js

@@ -1,10 +1,13 @@
 /**
  * Asynchronously loads the component for HomePage
  */
-import loadable from 'loadable-components';
 
+import React, { lazy, Suspense } from 'react';
 import LoadingIndicator from 'components/LoadingIndicator';
+const Component = lazy(() => import('./index'));
 
-export default loadable(() => import('./index'), {
-  LoadingComponent: LoadingIndicator,
-});
+export default () => (
+  <Suspense fallback={<LoadingIndicator />}>
+    <Component />
+  </Suspense>
+);

app/containers/NotFoundPage/Loadable.js

@@ -1,10 +1,13 @@
 /**
  * Asynchronously loads the component for NotFoundPage
  */
-import loadable from 'loadable-components';
 
+import React, { lazy, Suspense } from 'react';
 import LoadingIndicator from 'components/LoadingIndicator';
+const Component = lazy(() => import('./index'));
 
-export default loadable(() => import('./index'), {
-  LoadingComponent: LoadingIndicator,
-});
+export default () => (
+  <Suspense fallback={<LoadingIndicator />}>
+    <Component />
+  </Suspense>
+);

package.json

@@ -72,7 +72,6 @@
     "intl": "1.2.5",
     "invariant": "2.2.4",
     "ip": "1.1.5",
-    "loadable-components": "2.2.3",
     "lodash": "4.17.11",
     "minimist": "1.2.0",
     "prop-types": "15.7.2",