import React from "react";
import { holdLoader } from "../loader/gate";

/**
 * Boot the site-wide GSAP motion system (see ./motion.ts). Holds the page
 * loader until GSAP is loaded and fonts are settled, so SplitText measures
 * final line breaks.
 */
export default function useMotion() {
    React.useEffect(() => {
        let destroy: (() => void) | undefined;
        let cancelled = false;
        const release = holdLoader("motion");

        Promise.all([
            import("./motion"),
            document.fonts?.ready.catch(() => {}),
        ])
            .then(([{ initMotion }]) => {
                if (!cancelled) destroy = initMotion();
            })
            .catch((error) => console.warn("Motion failed to load", error))
            .finally(release);

        return () => {
            cancelled = true;
            release();
            destroy?.();
        };
    }, []);
}