A pattern to create a delayed suspense fallback

SlowSuspense.js

import React, {
  useEffect,
  useState,
  createContext,
  useContext,
  Suspense,
  useMemo
} from "react";

const SlowSuspenseCtx = createContext({});

export const SlowSuspense = ({ children, fallback = null }) => {
  const [show, setShow] = useState(false);
  // you could take these timeout values as props to the Spinner
  const remove = () => setTimeout(() => setShow(false), 500);
  const activate = () => setTimeout(() => setShow(true), 250);

  const value = useMemo(() => ({ activate, remove }), []);

  return (
    <SlowSuspenseCtx.Provider value={value}>
      {show && fallback}
      <Suspense fallback={<InvokeFallback />}>
        <>{children}</>
      </Suspense>
    </SlowSuspenseCtx.Provider>
  );
};

export const InvokeFallback = () => {
  const { activate, remove } = useContext(SlowSuspenseCtx);

  useEffect(() => {
    let timer = activate();
    return () => {
      clearTimeout(timer);
      remove();
    };
  }, [activate, remove]);

  return null;
};