File size: 1,860 Bytes
9e4583c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | "use client";
import { cn } from "@/shared/utils/cn";
// Spinner loading
export function Spinner({ size = "md", className }: { size?: string; className?: string }) {
const sizes: Record<string, string> = {
sm: "size-4",
md: "size-6",
lg: "size-8",
xl: "size-12",
};
return (
<span
role="status"
aria-label="Loading"
className={cn("material-symbols-outlined animate-spin text-primary", sizes[size], className)}
>
progress_activity
</span>
);
}
// Full page loading
export function PageLoading({ message = "Loading..." }: { message?: string }) {
return (
<div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-bg">
<Spinner size="xl" />
<p className="mt-4 text-text-muted">{message}</p>
</div>
);
}
// Skeleton loading
export function Skeleton({ className, ...props }: { className?: string; [key: string]: any }) {
return (
<div
aria-hidden="true"
className={cn("animate-pulse rounded-lg bg-border", className)}
{...props}
/>
);
}
// Card skeleton
export function CardSkeleton() {
return (
<div className="p-6 rounded-xl border border-border bg-surface">
<div className="flex items-center justify-between mb-4">
<Skeleton className="h-4 w-24" />
<Skeleton className="size-10 rounded-lg" />
</div>
<Skeleton className="h-8 w-16 mb-2" />
<Skeleton className="h-3 w-20" />
</div>
);
}
// Default export
export default function Loading({
type = "spinner",
...props
}: {
type?: string;
[key: string]: any;
}) {
switch (type) {
case "page":
return <PageLoading {...props} />;
case "skeleton":
return <Skeleton {...props} />;
case "card":
return <CardSkeleton {...props} />;
default:
return <Spinner {...props} />;
}
}
|