"use client";

import * as React from "react";

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

export interface PageLoaderProps extends React.HTMLAttributes<HTMLDivElement> {
  message?: string;
  showSpinner?: boolean;
  variant?: "fullscreen" | "contained";
}

function PageLoader({
  message,
  showSpinner = true,
  variant = "fullscreen",
  className,
  ...props
}: PageLoaderProps) {
  const isFullscreen = variant === "fullscreen";

  return (
    <div
      className={cn(
        "flex items-center justify-center bg-background/80 backdrop-blur-sm",
        isFullscreen ? "fixed inset-0 z-50" : "absolute inset-0",
        className
      )}
      role="status"
      aria-live="polite"
      aria-busy="true"
      {...props}
    >
      <div className="flex flex-col items-center gap-3 rounded-xl border border-border bg-card px-6 py-5 text-center">
        {showSpinner ? (
          <svg
            viewBox="0 0 24 24"
            aria-hidden="true"
            className="h-10 w-10 animate-spin text-primary"
          >
            <circle
              cx="12"
              cy="12"
              r="10"
              fill="none"
              stroke="currentColor"
              strokeWidth="4"
              className="opacity-25"
            />
            <path
              fill="currentColor"
              d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
              className="opacity-75"
            />
          </svg>
        ) : null}
        {message ? (
          <p className="text-sm text-muted-foreground">{message}</p>
        ) : (
          <span className="sr-only">Loading</span>
        )}
      </div>
    </div>
  );
}

export { PageLoader };
Page Loader

Dependencies

Files

Installation
