Commit dcb3c024 authored by Imran Salam's avatar Imran Salam
Browse files

use react lazy for code splitting instead of react-loadable

parent defa56c4
......@@ -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",
......
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>
);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment