forked from cerc-io/snowballtools-base
52512beaa2
* Consolidate layout pattern * Duplicates cleared * Tsdoc function docs * Excess files * Full types transition * Thorough tsdoc of existing comoponents
84 lines
1.8 KiB
TypeScript
84 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { LaconicMark } from '@/laconic-assets/laconic-mark';
|
|
import { cn } from '@/lib/utils';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
export interface LoadingOverlayProps {
|
|
/**
|
|
* Controls the visibility of the overlay.
|
|
* When false, the component returns null.
|
|
* @default true
|
|
*/
|
|
isLoading?: boolean;
|
|
|
|
/**
|
|
* Optional className for styling the overlay container.
|
|
* This will be merged with the default styles.
|
|
*/
|
|
className?: string;
|
|
|
|
/**
|
|
* Whether to show the Laconic logo in the overlay.
|
|
* @default true
|
|
*/
|
|
showLogo?: boolean;
|
|
|
|
/**
|
|
* Whether to show the loading spinner below the logo.
|
|
* @default true
|
|
*/
|
|
showSpinner?: boolean;
|
|
|
|
/**
|
|
* The z-index value for the overlay.
|
|
* Adjust this if you need the overlay to appear above or below other elements.
|
|
* @default 50
|
|
*/
|
|
zIndex?: number;
|
|
|
|
/**
|
|
* Whether to use solid black background instead of semi-transparent.
|
|
* Useful for initial page load and full-screen loading states.
|
|
* @default false
|
|
*/
|
|
solid?: boolean;
|
|
}
|
|
|
|
export function LoadingOverlay({
|
|
isLoading = true,
|
|
className,
|
|
showLogo = true,
|
|
showSpinner = true,
|
|
zIndex = 50,
|
|
solid = false,
|
|
}: LoadingOverlayProps) {
|
|
if (!isLoading) return null;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'fixed inset-0 flex flex-col items-center justify-center',
|
|
solid ? 'bg-black' : 'bg-black/90 backdrop-blur-sm',
|
|
className,
|
|
)}
|
|
style={{ zIndex }}
|
|
role="alert"
|
|
aria-busy="true"
|
|
aria-label="Loading"
|
|
>
|
|
{showLogo && (
|
|
<div className="animate-fade-in mb-4">
|
|
<LaconicMark className="text-white" />
|
|
</div>
|
|
)}
|
|
{showSpinner && (
|
|
<Loader2
|
|
className="animate-spin w-6 h-6 text-white"
|
|
aria-hidden="true"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|