usePageTransition

usePageTransition.js

function usePageTransition({
  beforeChange,
  afterChange,
  done,
}) {
  const startResolverRef = useRef(null);
  const dataRef = useRef(null);
  const transitionRef = useRef(null);

  useLayoutEffect(() => {
    if (startResolverRef.current === null) return;
    afterChangeRef.current?.(dataRef.current, transitionRef.current);
    startResolverRef.current();
    startResolverRef.current = null;
  });

  return async ({
    classNames = [],
    data,
  } = {}) => {
    if (!('startViewTransition' in document) || reducedMotionMedia?.matches) {
      return;
    }

    return new Promise((resolve) => {
      dataRef.current = data;
      document.documentElement.classList.add(...classNames);

      const transition = document.startViewTransition(async () => {
        resolve();

        // Wait for the next update
        await new Promise((resolve) => (startResolverRef.current = resolve));
      });

      transitionRef.current = transition;
      beforeChange?.(data, transition);

      globalThis.ongoingTransition = transition;

      transition.finished
        .finally(() => {
          globalThis.ongoingTransition = undefined;
          document.documentElement.classList.remove(...classNames);
          done?.(data);
        })
        .catch(() => {});
    });
  };
}