26 lines
958 B
TypeScript
26 lines
958 B
TypeScript
import clsx from "clsx";
|
|
import { useNavigation } from "react-router";
|
|
// Subframe migration (strangler shim): the spinner element is now the Subframe
|
|
// design-system Loader; the conditional navigation-state logic and surrounding
|
|
// layout are preserved unchanged. The `small` size still drives a smaller spinner.
|
|
import { Loader } from "~/ui/components/Loader";
|
|
|
|
interface Props {
|
|
small?: boolean;
|
|
loading?: boolean;
|
|
}
|
|
export default function Loading({ small = false, loading }: Props) {
|
|
const navigation = useNavigation();
|
|
return (
|
|
<>
|
|
{(navigation.state === "submitting" || navigation.state === "loading" || loading) && (
|
|
<div className="space-y-2 pb-4 pt-4 text-center">
|
|
<div className={clsx("flex h-auto w-full flex-col justify-center space-y-4 py-12 text-center", small && "py-2")}>
|
|
<Loader size={small ? "medium" : "large"} className="mx-auto" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|