Pending
Marks content as busy and shows a spinner while work is in progress.
Preview
Saving the themeLoading
import { Pending } from "@/components/ui/Pending";
export function PendingDemo() {
return <Pending pending>Saving the theme</Pending>;
}Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/pendingManual
Copy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Pending component into your components/ui/Pending.tsx file.
"use client";
import * as React from "react";
import { cn } from "@/utils/class-names";
function Pending({
className,
pending = false,
children,
label = "Loading",
}: {
className?: string;
pending?: boolean;
children?: React.ReactNode;
label?: string;
}) {
return (
<span
aria-busy={pending || undefined}
data-slot="pending"
data-pending={pending ? "" : undefined}
className={cn("inline-flex items-center gap-0.5", className)}
>
{pending ? (
<span
aria-hidden
className="size-1 animate-spin rounded-full border-2 border-gray-6 border-t-accent-9 motion-reduce:animate-none"
/>
) : null}
<span className={pending ? "text-gray-11" : undefined}>{children}</span>
{pending ? <span className="sr-only">{label}</span> : null}
</span>
);
}
export { Pending };