LoadingOverlay

"use client";

import { useState } from "react";
import {
  Button,
  LoadingOverlay,
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent
} from "@pimolu/react";

function ControlledLoadingDemo() {
  const [loading, setLoading] = useState(true);
  return (
    <div className="grid gap-5 min-w-0">
      <div className="flex flex-wrap items-center gap-3 min-w-0">
        <Button
          size="sm"
          appearance="outline"
          onClick={() => setLoading((value) => !value)}
        >
          {loading ? "Stop loading" : "Start loading"}
        </Button>
        <span className="text-sm text-muted leading-relaxed">
          aria-busy={String(loading)} · the covered button cannot be
          focused
        </span>
      </div>
      <LoadingOverlay
        loading={loading}
        label="Loading the dashboard"
        description="Metrics, invoices and activity arrive together."
      >
        <Card>
          <CardHeader>
            <CardTitle>Workspace overview</CardTitle>
            <CardDescription>
              The content underneath stays in the tree, inert and hidden from
              assistive technology.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex flex-wrap items-center gap-3 min-w-0">
              <Button size="sm">Open a report</Button>
              <span className="text-sm text-muted leading-relaxed">This button is behind the overlay.</span>
            </div>
          </CardContent>
        </Card>
      </LoadingOverlay>
    </div>
  );
}

export function DemoExample() {
  return (<ControlledLoadingDemo />);
}