Function useDelayedSnapshot

packages/dev/s2-docs/src/Router.tsx:57–93

()

}

function useDelayedSnapshot() {
  let [delayedSnapshot, setDelayedSnapshot] = useState(getSnapshot());
  let skeletonDisplayTime = useRef(0);
  useEffect(() => {
    let timeout;
    return subscribe(() => {
      clearTimeout(timeout);

      let snapshot = getSnapshot();
      if (snapshot.promise) {
        // Delay skeleton slightly in case network is fast.
        timeout = setTimeout(() => {
          setDelayedSnapshot(snapshot);
        }, SKELETON_DELAY);
      } else {
        // Ensure that skeleton shows for a minimum amount of time
        // if it shows at all, to avoid a jarring flash.
        let skeletonTimeout = skeletonDisplayTime.current + MIN_SKELETON_TIME - Date.now();
        if (skeletonTimeout > 0) {
          timeout = setTimeout(() => {
            setDelayedSnapshot(snapshot);
          }, skeletonTimeout);
        } else {
          setDelayedSnapshot(snapshot);
        }
      }
    });
  }, []);

  useEffect(() => {
    if (delayedSnapshot.promise) {
      skeletonDisplayTime.current = Date.now();
    }
  }, [delayedSnapshot]);

  return delayedSnapshot;
}

export function NavigationSuspense({children}: {children: React.ReactNode}) {
  let {isLoading} = useContext(RouterContext)!;