View Transitions

1"use client";
2 
3import * as React from "react";
4import { useRouter } from "next/navigation";
5import "./view-transitions.css";
6 
7/**
8 * View Transitions for client-side route changes (Next.js App Router only).
9 * Feature-detected, and a complete no-op where unsupported or under
10 * prefers-reduced-motion.
11 *
12 * ponytail: the transition is closed on a short timer rather than on the
13 * router's commit, because App Router does not expose a navigation-complete
14 * promise. Swap the timer for that promise if/when Next exposes one.
15 */
16export function ViewTransitions() {
17  const router = useRouter();
18 
19  React.useEffect(() => {
20    const doc = document as Document & {
21      startViewTransition?: (cb: () => void | Promise<void>) => unknown;
22    };
23    if (typeof doc.startViewTransition !== "function") return;
24    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
25 
26    const onClick = (e: MouseEvent) => {
27      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
28        return;
29      const a = (e.target as HTMLElement | null)?.closest?.("a");
30      if (!a || a.target === "_blank" || a.hasAttribute("download")) return;
31      const url = new URL(a.href, location.href);
32      if (url.origin !== location.origin) return;
33      if (url.pathname === location.pathname) return;
34 
35      e.preventDefault();
36      doc.startViewTransition!(async () => {
37        router.push(url.pathname + url.search + url.hash);
38        await new Promise((r) => setTimeout(r, 90));
39      });
40    };
41 
42    document.addEventListener("click", onClick);
43    return () => document.removeEventListener("click", onClick);
44  }, [router]);
45 
46  return null;
47}
48 
49/** Removes the `no-js` class so JS-only affordances can hide their fallbacks. */
50export function JsFlag() {
51  React.useEffect(() => {
52    document.documentElement.classList.remove("no-js");
53  }, []);
54  return null;
55}