"use client";

import { ViewTransition } from "react";

/**
 * Subtle loading placeholder used in place of skeleton `loading.tsx`
 * files. Instead of a flashy "skeleton of the page you're waiting for",
 * this renders a single thin animated bar that crossfades into the
 * real content via the View Transitions API. The previous page stays
 * visible underneath until the new page is ready, so the user never
 * feels the gap.
 *
 * Drop this in a `loading.tsx` file:
 *
 *   // app/admin/loading.tsx
 *   import { LoadingFade } from "@/components/transitions/LoadingFade";
 *   export default LoadingFade;
 */
export function LoadingFade() {
  return (
    <ViewTransition name="page-content" update="default">
      <div
        className="fixed top-0 left-0 right-0 z-50 h-0.5 overflow-hidden"
        aria-hidden="true"
      >
        <div
          className="h-full w-1/3 rounded-full"
          style={{
            background:
              "linear-gradient(90deg, transparent 0%, #14532D 50%, transparent 100%)",
            animation: "transition-shimmer 1.4s ease-in-out infinite",
          }}
        />
      </div>
    </ViewTransition>
  );
}

export default LoadingFade;
