use react lazy for code splitting instead of react-loadable

src/ensembl/package.json

@@ -46,7 +46,6 @@
     "react-contenteditable": "^3.2.6",
     "react-dom": "^16.7.0",
     "react-hot-loader": "^4.6.5",
-    "react-loadable": "^5.5.0",
     "react-redux": "^5.1.1",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
@@ -74,7 +73,6 @@
     "@types/prettier": "^1.15.2",
     "@types/react": "^16.8.1",
     "@types/react-dom": "^16.0.11",
-    "@types/react-loadable": "^5.5.0",
     "@types/react-redux": "^6.0.13",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-router-hash-link": "^1.2.0",

src/ensembl/src/content/app/App.tsx

-import React, { Component, Fragment } from 'react';
+import React, { Component, Fragment, lazy, Suspense } from 'react';
 import { Route, RouteComponentProps, withRouter } from 'react-router';
-import Loadable from 'react-loadable';
 import { connect } from 'react-redux';
 
 import { changeCurrentApp } from 'src/header/headerActions';
 import AppBar from './AppBar';
 
-const GlobalSearch = Loadable({
-  loader: () => import('./global-search/GlobalSearch'),
-  loading: () => null
-});
-
-const SpeciesSelector = Loadable({
-  loader: () => import('./species-selector/SpeciesSelector'),
-  loading: () => null
-});
-
-const Browser = Loadable({
-  loader: () => import('./browser/Browser'),
-  loading: () => null
-});
+const GlobalSearch = lazy(() => import('./global-search/GlobalSearch'));
+const SpeciesSelector = lazy(() =>
+  import('./species-selector/SpeciesSelector')
+);
+const Browser = lazy(() => import('./browser/Browser'));
 
 type StateProps = {};
 
@@ -46,9 +36,11 @@ export class App extends Component<AppProps> {
     return (
       <Fragment>
         <AppBar />
-        <Route path={`${url}/global-search`} component={GlobalSearch} />
-        <Route path={`${url}/species-selector`} component={SpeciesSelector} />
-        <Route path={`${url}/browser`} component={Browser} />
+        <Suspense fallback={<div>Loading...</div>}>
+          <Route path={`${url}/global-search`} component={GlobalSearch} />
+          <Route path={`${url}/species-selector`} component={SpeciesSelector} />
+          <Route path={`${url}/browser`} component={Browser} />
+        </Suspense>
       </Fragment>
     );
   }