"use client";

import { useLinkStatus } from "next/link";

import { RouteLoading } from "@/components/RouteLoading";

/**
 * A full-screen loading screen that appears the instant the surrounding
 * `<Link>` starts navigating — before any response arrives — so a slow route
 * never looks like a dead tap. Renders nothing while idle and disappears with
 * the page that owns it.
 */
export function LinkLoadingScreen({ messageKey }: { messageKey: string }) {
  const { pending } = useLinkStatus();

  if (!pending) return null;

  return (
    <div className="pointer-events-none fixed inset-0 z-50">
      <RouteLoading messageKey={messageKey} />
    </div>
  );
}