Use React suspense api instead of react-loadable

package.json

@@ -77,7 +77,6 @@
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
     "react-final-form": "^4.1.0",
-    "react-loadable": "^5.3.1",
     "react-redux": "^6.0.1",
     "react-router-dom": "^4.3.1",
     "recompose": "^0.30.0",

src/components/Refresh/index.jsx

@@ -1,47 +0,0 @@
-// @flow
-import * as React from 'react'
-import CircularProgress from '@material-ui/core/CircularProgress'
-import RefreshIcon from '@material-ui/icons/Refresh'
-import { sm, secondary } from '~/theme/variables'
-
-type Props = {
-  callback: () => void,
-}
-
-type State = {
-  loading: boolean,
-}
-
-const loaderStyle = {
-  margin: `0px 0px 0px ${sm}`,
-  color: secondary,
-}
-
-class Loader extends React.Component<Props, State> {
-  constructor() {
-    super()
-
-    this.state = {
-      loading: false,
-    }
-  }
-
-  onReload = async () => {
-    this.setState({ loading: true }, await this.props.callback())
-    this.setState({ loading: false })
-  }
-
-  render() {
-    const { loading } = this.state
-
-    return (
-      <div style={loaderStyle}>
-        {loading
-          ? <CircularProgress color="inherit" size={24} />
-          : <RefreshIcon color="inherit" onClick={this.onReload} /> }
-      </div>
-    )
-  }
-}
-
-export default Loader

src/components/Stepper/index.jsx

@@ -43,7 +43,9 @@ const transitionProps = {
 class GnoStepper extends React.PureComponent<Props, State> {
   static Page = ({ children }: PageProps) => children
 
-  static FinishButton = ({ component, to, title, ...props }) => (
+  static FinishButton = ({
+    component, to, title, ...props
+  }) => (
     <Button component={component} to={to} variant="contained" color="primary" {...props}>
       {title}
     </Button>
@@ -59,13 +61,14 @@ class GnoStepper extends React.PureComponent<Props, State> {
   }
 
   onReset = () => {
-    const resetCallback = this.props.onReset
-    if (resetCallback) {
-      resetCallback()
+    const { onReset, initialValues } = this.props
+    if (onReset) {
+      onReset()
     }
+
     this.setState(() => ({
       page: 0,
-      values: this.props.initialValues || {},
+      values: initialValues || {},
     }))
   }
 
@@ -78,17 +81,21 @@ class GnoStepper extends React.PureComponent<Props, State> {
     return children({ ...props, updateInitialProps: this.updateInitialProps })
   }
 
-  updateInitialProps = initialValues => {
-    this.setState({ values: initialValues })
+  updateInitialProps = (values) => {
+    this.setState({ values })
   }
 
   validate = (values: Object) => {
-    const activePage = React.Children.toArray(this.props.children)[this.state.page]
+    const { children } = this.props
+    const { page } = this.state
+
+    const activePage = React.Children.toArray(children)[page]
     return activePage.props.validate ? activePage.props.validate(values) : {}
   }
 
   next = async (values: Object) => {
-    const activePageProps = this.getPageProps(this.props.children)
+    const { children } = this.props
+    const activePageProps = this.getPageProps(children)
     const { prepareNextInitialProps } = activePageProps
 
     let pageInitialProps
@@ -98,7 +105,7 @@ class GnoStepper extends React.PureComponent<Props, State> {
 
     const finalValues = { ...values, ...pageInitialProps }
     this.setState(state => ({
-      page: Math.min(state.page + 1, React.Children.count(this.props.children) - 1),
+      page: Math.min(state.page + 1, React.Children.count(children) - 1),
       values: finalValues,
     }))
   }
@@ -129,7 +136,9 @@ class GnoStepper extends React.PureComponent<Props, State> {
   isLastPage = page => page === this.props.steps.length - 1
 
   render() {
-    const { steps, children, classes, disabledWhenValidating = false } = this.props
+    const {
+      steps, children, classes, disabledWhenValidating = false,
+    } = this.props
     const { page, values } = this.state
     const activePage = this.getActivePageFrom(children)
     const lastPage = this.isLastPage(page)

src/index.js

@@ -4,11 +4,12 @@ import 'babel-polyfill'
 require('dotenv').config()
 
 import { MuiThemeProvider } from '@material-ui/core/styles'
-import React from 'react'
+import React, { Suspense } from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
 import { ConnectedRouter } from 'connected-react-router'
 import PageFrame from '~/components/layout/PageFrame'
+import Loader from './components/Loader/index'
 import { history, store } from '~/store'
 import theme from '~/theme/mui'
 import AppRoutes from '~/routes'
@@ -20,7 +21,9 @@ const Root = () => (
     <MuiThemeProvider theme={theme}>
       <ConnectedRouter history={history}>
         <PageFrame>
-          <AppRoutes />
+          <Suspense fallback={<Loader />}>
+            <AppRoutes />
+          </Suspense>
         </PageFrame>
       </ConnectedRouter>
     </MuiThemeProvider>

src/routes/index.js

@@ -1,8 +1,6 @@
 // @flow
 import React from 'react'
-import Loadable from 'react-loadable'
 import { Switch, Redirect, Route } from 'react-router-dom'
-import Loader from '~/components/Loader'
 import Welcome from './welcome/container'
 import {
   SAFELIST_ADDRESS,
@@ -14,43 +12,22 @@ import {
   LOAD_ADDRESS,
 } from './routes'
 
-// TODO: Use react 16.6 features
-// https://blog.logrocket.com/lazy-loading-components-in-react-16-6-6cea535c0b52
+const Safe = React.lazy(() => import('./safe/container'))
 
-const Safe = Loadable({
-  loader: () => import('./safe/container'),
-  loading: Loader,
-})
+const Settings = React.lazy(() => import('./tokens/container'))
 
-const Settings = Loadable({
-  loader: () => import('./tokens/container'),
-  loading: Loader,
-})
+const SafeList = React.lazy(() => import('./safeList/container'))
 
-const SafeList = Loadable({
-  loader: () => import('./safeList/container'),
-  loading: Loader,
-})
+const Open = React.lazy(() => import('./open/container/Open'))
 
-const Open = Loadable({
-  loader: () => import('./open/container/Open'),
-  loading: Loader,
-})
+const Opening = React.lazy(() => import('./opening/container'))
 
-const Opening = Loadable({
-  loader: () => import('./opening/container'),
-  loading: Loader,
-})
-
-const Load = Loadable({
-  loader: () => import('./load/container/Load'),
-  loading: Loader,
-})
+const Load = React.lazy(() => import('./load/container/Load'))
 
 const SAFE_ADDRESS = `${SAFELIST_ADDRESS}/:${SAFE_PARAM_ADDRESS}`
 const SAFE_SETTINGS = `${SAFE_ADDRESS}${SETTINS_ADDRESS}`
 
-export const settingsUrlFrom = (safeAddress: string) => `${SAFELIST_ADDRESS}/${safeAddress}/settings`
+export const settingsUrlFrom = (safeAddress: string) => `${SAFELIST_ADDRESS}/${safeAddress}${SETTINS_ADDRESS}`
 
 const Routes = () => (
   <Switch>