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);
});
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);
});