React-Loadable skip rendering 'Loading Component'

Question

I am trying to do code splitting in react router v4 using react-loadable. What I intend to acheive is that not replace current view with the loading component instead keep whatever is currently rendered. and change state of the currently loaded component only. Is there any way to achieve this using react-loadable. Or may be is there a different library.

import Loadable from 'react-loadable';`
`import LoaderStripComponent from './LoaderStripComponent.jsx';`
`export default function Stage3Loadable(opts) {
    var loadable = Loadable(Object.assign({
        loading: LoaderStripComponent,
        timeout: 10
    }, opts));
    return loadable;
};`

`<Swtich>
 <Route exact path="/" component={Stage3Loadable({
      loader: () => import('../components/HomeCoverPage.jsx'),
      modules: ['.../components/HomeCoverPage.jsx'],
      webpack: () => [require.resolveWeak('../components/HomeCoverPage.jsx')],
    })} />
</Swtich>`

`class LoaderStripComponent extends React.Component {
    componentDidMount() {
        showLoader();
    }
    componentWillUnmount() {
        hideLoader();
    }
    componentWillReceiveProps(nextProps) {
        // console.log('>>>>>>>>>>>>', props.error);
    }
    render() {
        return null;
    }
}`
`function mapStateToProps(state) {
    return {
        device: state.device,
        geolocation: state.geoLocation,
        loader: state.routerLoading
    };
}`

`function mapDispatchToProps(dispatch) {`
    `return bindActionCreators({`

    }, dispatch);
`}`

export default connect(mapStateToProps, mapDispatchToProps)(LoaderStripComponent);

I want this LoadableStrip to render previously loaded component till the time import promise is resolved.