What wrong with delay property in react-loadable?

Question

I'm using react-loadable library for lazy-loading in reactJS. It works very well for rendering component. But when i use the delay property, the render time is not effected. So, What i need to update here ?

const Home = Loadable({
  loader: () => import('./Home'),
  loading: Loading,
  delay: 5000
});

const Test = Loadable({
  loader: () => import('./Test'),
  loading: Loading,
  delay: 5000
});

return (
  <Router>
    <div className="App">
      <Link to="/"> Home </Link>
      <Link to="/test"> Test </Link>
      <Route exact path="/" component={Home} />
      <Route path='/test' component={Test} />
    </div>
  </Router>
);

Thanks for any helping.

Answer 1

Delay doesn't affect the rendering time of the actual component but it delays the rendering time of Loading component.

Here is excerpt from official Documentation:

Avoiding Flash Of Loading Component

Sometimes components load really quickly (<200ms) and the loading screen only quickly flashes on the screen. A number of user studies have proven that this causes users to perceive things taking longer than they really have. If you don't show anything, users perceive it as being faster. So your loading component will also get a pastDelay prop which will only be true once the component has taken longer to load than a set delay.

Source: https://github.com/jamiebuilds/react-loadable#avoiding-flash-of-loading-component