React suspense/lazy delay?

Question

I am trying to use the new React Lazy and Suspense to create a fallback loading component. This works great, but the fallback is showing only a few ms. Is there a way to add an additional delay or minimum time, so I can show animations from this component before the next component is rendered?

Lazy import now

const Home = lazy(() => import("./home")); const Products = lazy(() => import("./home/products")); 

Waiting component:

function WaitingComponent(Component) {      return props => (       <Suspense fallback={<Loading />}>             <Component {...props} />       </Suspense>     ); } 

Can I do something like this?

const Home = lazy(() => {   setTimeout(import("./home"), 300); }); 

Answer 1

lazy function is supposed to return a promise of { default: ... } object which is returned by import() of a module with default export. setTimeout doesn't return a promise and cannot be used like that. While arbitrary promise can:

const Home = lazy(() => {   return new Promise(resolve => {     setTimeout(() => resolve(import("./home")), 300);   }); }); 

If an objective is to provide minimum delay, this isn't a good choice because this will result in additional delay.

A minimum delay would be:

const Home = lazy(() => {   return Promise.all([     import("./home"),     new Promise(resolve => setTimeout(resolve, 300))   ])   .then(([moduleExports]) => moduleExports); });