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

Can I do something like this?

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

user_3731501 · Answer

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

user_8648257 · Answer

As mentioned by loopmode, component fallback should have a timeout.

import React, { useState, useEffect } from 'react'

const DelayedFallback = () => {
  const [show, setShow] = useState(false)
  useEffect(() => {
    let timeout = setTimeout(() => setShow(true), 300)
    return () => {
      clearTimeout(timeout)
    }
  }, [])

  return (
    <>
      {show && Loading ...}
    
  )
}
export default DelayedFallback

Then just import that component and use it as fallback.

}>

user_5669456 · Answer

Fallback component animations with `Suspense` and `lazy`

@Akrom Sprinter has a good solution in case of fast load times, as it hides the fallback spinner and avoids overall delay. Here is an extension for more complex animations requested by OP:

1. Simple variant: fade-in + delayed display

const App = () => {
  const [isEnabled, setEnabled] = React.useState(false);
  return (
    
      
      }>
        {isEnabled && }
      
    
  );
};

const Fallback = () => {
  const containerRef = React.useRef();
  return (
    
      
    

  );
};

/*
 Technical helpers
*/

const Home = React.lazy(() => fakeDelay(2000)(import_("./routes/Home")));

// import_ is just a stub for the stack snippet; use dynamic import in real code.
function import_(path) {
  return Promise.resolve({ default: () => Hello Home! });
}

// add some async delay for illustration purposes
function fakeDelay(ms) {
  return promise =>
    promise.then(
      data =>
        new Promise(resolve => {
          setTimeout(() => resolve(data), ms);
        })
    );
}

ReactDOM.render(, document.getElementById("root"));

/* Delay showing spinner first, then gradually let it fade in. */ .fallback-fadein { visibility: hidden; animation: fadein 1.5s; animation-fill-mode: forwards; animation-delay: 0.5s; /* no spinner flickering for fast load times */ } @keyframes fadein { from { visibility: visible; opacity: 0; } to { visibility: visible; opacity: 1; } } .spin { animation: spin 2s infinite linear; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } }

You just add some @keyframes animations to Fallback component, and delay its display either by setTimeout and a state flag, or by pure CSS (animation-fill-mode and -delay used here).

2. Complex variant: fade-in and out + delayed display

This is possible, but needs a wrapper. We don't have a direct API for Suspense to wait for a fade out animation, before the Fallback component is unmounted.

Let's create a custom useSuspenseAnimation Hook, that delays the promise given to React.lazy long enough, so that our ending animation is fully visible:

// inside useSuspenseAnimation const DeferredHomeComp = React.lazy(() => Promise.all([ import("./routes/Home"), deferred.promise // resolve this promise, when Fallback animation is complete ]).then(([imp]) => imp) )

const App = () => { const { DeferredComponent, ...fallbackProps } = useSuspenseAnimation( "./routes/Home" ); const [isEnabled, setEnabled] = React.useState(false); return ( }> {isEnabled && } ); }; const Fallback = ({ hasImportFinished, enableComponent }) => { const ref = React.useRef(); React.useEffect(() => { const current = ref.current; current.addEventListener("animationend", handleAnimationEnd); return () => { current.removeEventListener("animationend", handleAnimationEnd); }; function handleAnimationEnd(ev) { if (ev.animationName === "fadeout") { enableComponent(); } } }, [enableComponent]); const classes = hasImportFinished ? "fallback-fadeout" : "fallback-fadein"; return ( ); }; /* Possible State transitions: LAZY -> IMPORT_FINISHED -> ENABLED - LAZY: React suspense hasn't been triggered yet. - IMPORT_FINISHED: dynamic import has completed, now we can trigger animations. - ENABLED: Deferred component will now be displayed */ function useSuspenseAnimation(path) { const [state, setState] = React.useState(init); const enableComponent = React.useCallback(() => { if (state.status === "IMPORT_FINISHED") { setState(prev => ({ ...prev, status: "ENABLED" })); state.deferred.resolve(); } }, [state]); return { hasImportFinished: state.status === "IMPORT_FINISHED", DeferredComponent: state.DeferredComponent, enableComponent }; function init() { const deferred = deferPromise(); // component object reference is kept stable, since it's stored in state. const DeferredComponent = React.lazy(() => Promise.all([ // again some fake delay for illustration fakeDelay(2000)(import_(path)).then(imp => { // triggers re-render, so containing component can react setState(prev => ({ ...prev, status: "IMPORT_FINISHED" })); return imp; }), deferred.promise ]).then(([imp]) => imp) ); return { status: "LAZY", DeferredComponent, deferred }; } } /* technical helpers */ // import_ is just a stub for the stack snippet; use dynamic import in real code. function import_(path) { return Promise.resolve({ default: () => Hello Home! }); } // add some async delay for illustration purposes function fakeDelay(ms) { return promise => promise.then( data => new Promise(resolve => { setTimeout(() => resolve(data), ms); }) ); } function deferPromise() { let resolve; const promise = new Promise(_resolve => { resolve = _resolve; }); return { resolve, promise }; } ReactDOM.render(, document.getElementById("root"));

/* Delay showing spinner first, then gradually let it fade in. */ .fallback-fadein { visibility: hidden; animation: fadein 1.5s; animation-fill-mode: forwards; animation-delay: 0.5s; /* no spinner flickering for fast load times */ } @keyframes fadein { from { visibility: visible; opacity: 0; } to { visibility: visible; opacity: 1; } } .fallback-fadeout { animation: fadeout 1s; animation-fill-mode: forwards; } @keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } .spin { animation: spin 2s infinite linear; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } }

Key points for complex variant

1.) useSuspenseAnimation Hook returns three values:

hasImportFinished (boolean) → if true, Fallback can start its fade out animation

enableComponent (callback) → invoke it to unmount Fallback, when animation is done.

DeferredComponent → extended lazy Component loaded by dynamic import

2.) Listen to the animationend DOM event, so we know when animation has ended.

user_368254 · Answer

You should create a fallback component that itself has a timeout and a visible state. Initially you set visible false. When fallback component gets mounted, it should setTimeout to turn visible state flag on. Either make sure your component is still mounted, or clear the timeout when the component gets unmounted. Finally, if visible state is false, render null in your fallback component (or e.g. just blocking/semi-transparent overlay but no spinner/animation)

Then use such component, e.g. <Loading overlay/>, as fallback.

Then use such component, e.g. , as fallback.

user_7618813 · Answer

If anyone is looking for a typescript, abstracted solution:

import { ComponentType, lazy } from 'react';

export const lazyMinLoadTime = >(factory: () => Promise<{ default: T }>, minLoadTimeMs = 2000) =>
  lazy(() =>
    Promise.all([factory(), new Promise((resolve) => setTimeout(resolve, minLoadTimeMs))]).then(([moduleExports]) => moduleExports)
  );

Usage:

const ImportedComponent = lazyMinLoadTime(() => import('./component'), 2000)

user_7682021 · Answer

props to @Estus Flask for a super helpful answer. I was using just the setTimeout functionality before, but couldn't get tests to work at all. Calling setTimeout in the tests was causing nested calls, jest.useFakeTimers() and jest.runAllTimers() didn't seem to do anything, and I was stuck getting the loader back. Since searching for the right way to test this took so long, I figured it would be helpful share how I was able to test it. With an implementation per the given solution:

import React, { ReactElement, Suspense } from 'react';
import { Outlet, Route, Routes } from 'react-router-dom';

import Loader from 'app/common/components/Loader';


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

interface PagesProps {
  toggleTheme: () => void;
}

const Pages = (props: PagesProps): ReactElement => (
  }>
    
      
          
          
        
      }>
        } />
      
    
  
);

export default Pages;

I was able to successfully test it with the following. Note that if you don't include jest.useFakeTimers() and jest.runAllTimers() you'll see flaky tests. There's a little excess detail in my tests because I'm also testing pushing the history (in other tests), but hopefully this helps anyone else!

/**
 * @jest-environment jsdom
 */
import { render, screen, cleanup, waitFor } from '@testing-library/react';
import { createMemoryHistory } from 'history';
import { Router } from 'react-router-dom';

import Pages from './';

describe('Pages component', () => {
  beforeEach(() => {
    jest.useFakeTimers();
  })
  const history = createMemoryHistory();

  it('displays loader when lazy', async () => {
    render(
      
        
      ,
    );

    const lazyElement = await screen.findByText(/please wait/i);
    expect(lazyElement).toBeInTheDocument();
  });

  it('displays "Welcome!" on Home page lazily', async () => {
    render(
      
        
      ,
    );

    const fallbackLoader = await screen.findByText(/please wait/i);
    expect(fallbackLoader).toBeInTheDocument();
    jest.runAllTimers();

    const lazyElement = await screen.findByText('Welcome!');
    expect(lazyElement).toBeInTheDocument();
  });

  afterEach(cleanup);
});

user_5763627 · Answer

I faced similar problem moreover I was using TypeScript along with React. So, I had to respect typescript compiler as well & I went ahead with an approach having an infinite delay along with no complain from typescript as well. Promise that never resolved

const LazyRoute = lazy(() => {
  return new Promise(resolve => () =>
    import(
      '../../abc'
    ).then(x => x e => null as never),
  );
});

user_16988053 · Answer

To avoid flashing a loader if the loading is very fast, you could use a p-min-delay function, that delays a promise a minimum amount of time. Useful when you have a promise that may settle immediately or may take some time, and you want to ensure it doesn't settle too fast.

For example:

import { Suspense, lazy } from 'react';
import { PageLoadingIndicator } from 'components';
import pMinDelay from 'p-min-delay';

const HomePage = lazy(() => pMinDelay(import('./pages/Home'), 500));

function App() {
  return (
    }>
      
    
  );
}

export default App;

React suspense/lazy delay?

8 Answers

Fallback component animations with `Suspense` and `lazy`

1. Simple variant: fade-in + delayed display

2. Complex variant: fade-in and out + delayed display

Key points for complex variant

React suspense/lazy delay?

8 Answers

Fallback component animations with Suspense and lazy

1. Simple variant: fade-in + delayed display

2. Complex variant: fade-in and out + delayed display

Key points for complex variant

Fallback component animations with `Suspense` and `lazy`