EC maker

- ViewTransitionsAPI main page -

declare global {
  interface Document {
    startViewTransition: (callback: () => Promise<void>) => void;
  }
}

export const useViewTransition = <T extends (...args: any[]) => void>(
  callback: T
) => {
  const startViewTransition = (...args: Parameters<T>) => {
    if (typeof document === 'undefined') return;
    if (!document.startViewTransition) {
      callback(...args);

      return;
    }

    document.startViewTransition(async () => {
      await Promise.resolve(callback(...args));
    });
  };

  return { startViewTransition };
};

export const useTransitionRouterPush = () => {
  const router = useRouter();
  const routerPush = useCallback(
    async (to: string) => {
      await router.push(to);
    },
    [router]
  );
  const { startViewTransition: routerPushWithTransition } =
    useViewTransition(routerPush);

  return { routerPushWithTransition };
};

your code