Loading Overlay

import { LoadingOverlay } from "@/components/ui/loading-overlay";

export default function Example() {
  return <LoadingOverlay />;
}

"use client";

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const LoadingOverlay = forwardRef(({ className, loading, children, label = "Loading...", ...props }, ref) => (
  <div ref={ref} className={cn("relative", className)} {...props}>
    {children}
    {loading && (
      <div className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-[inherit] bg-background/80 backdrop-blur-sm">
        <div className="h-8 w-8 animate-spin rounded-full border-4 border-muted border-t-primary" />
        <span className="text-sm text-muted-foreground">{label}</span>
      </div>
    )}
  </div>
));
LoadingOverlay.displayName = "LoadingOverlay";

export { LoadingOverlay };