A loading curtain that overlays a region of content with a frosted-paper mask and a spinner while it waits on an async action, keeping the covered content's layout intact.
import { BlockUI } from "@/components/ui/block-ui";
import { useState } from "react";
export default function BlockUiDemo() {
const [blocked, setBlocked] = useState(true);
return (
<div
style={{
display: "grid",
gap: "var(--bs-gap-md)",
maxInlineSize: "24rem",
}}
>
<button
type="button"
onClick={() => setBlocked(!blocked)}
style={{
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
blockSize: "var(--bs-control-height-sm)",
padding: "0 var(--bs-padding-md)",
border: "1px solid var(--bs-color-border-strong)",
borderRadius: "var(--bs-radius-sm)",
background: "transparent",
color: "var(--bs-color-text-primary)",
fontSize: "var(--bs-font-size-sm)",
cursor: "pointer",
}}
>
{blocked ? "Lift the curtain" : "Draw the curtain"}
</button>
<BlockUI blocked={blocked}>
<div
style={{
padding: "var(--bs-padding-lg)",
border: "1px solid var(--bs-color-border)",
borderRadius: "var(--bs-radius-md)",
}}
>
Invoices settle every quarter. The ledger holds its shape while the
curtain is drawn.
</div>
</BlockUI>
</div>
);
}
