mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-05 17:58:55 +00:00
34 lines
832 B
TypeScript
34 lines
832 B
TypeScript
import { Transition } from "@headlessui/react";
|
|
import { twMerge } from "tailwind-merge";
|
|
import { Spinner } from "./Spinner";
|
|
|
|
export const LoadingSpinner = ({
|
|
isShowing,
|
|
message,
|
|
}: {
|
|
isShowing: boolean;
|
|
message?: string;
|
|
}) => {
|
|
return (
|
|
<Transition show={isShowing}>
|
|
<div
|
|
className={twMerge(
|
|
// default styles
|
|
"flex flex-col items-center gap-2",
|
|
// base transition properties
|
|
"transition-opacity ease-in-out",
|
|
// Shared closed styles
|
|
"data-[closed]:opacity-0",
|
|
// Entering styles
|
|
"data-[enter]:duration-100",
|
|
// Leaving styles
|
|
"data-[leave]:duration-300",
|
|
)}
|
|
>
|
|
<Spinner className="size-10" />
|
|
{message && <label>{message}</label>}
|
|
</div>
|
|
</Transition>
|
|
);
|
|
};
|