27 lines
804 B
TypeScript
27 lines
804 B
TypeScript
import LoadingIndicator from "./LoadingIndicator";
|
|
|
|
type LoadingFrameProps = {
|
|
children: React.ReactNode;
|
|
loading?: boolean;
|
|
label?: string;
|
|
className?: string;
|
|
};
|
|
|
|
export default function LoadingFrame({ children, loading = false, label = "Loading data…", className = "" }: LoadingFrameProps) {
|
|
const classNames = ["loading-frame", loading ? "is-loading" : "", className].filter(Boolean).join(" ");
|
|
|
|
return (
|
|
<div className={classNames} aria-busy={loading || undefined}>
|
|
{children}
|
|
{loading && (
|
|
<div className="loading-frame-overlay" role="status" aria-live="polite">
|
|
<div className="loading-frame-panel">
|
|
<LoadingIndicator label={label} size="md" />
|
|
<span>{label}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|