A local area that is loading

// apps/docs/examples/ui/loading-screen.tsx'use client';
import {useState} from 'react';
import {LoadingScreen} from '@workspace/active-ui/components/composed/loading-screen';import {Button} from '@workspace/active-ui/components/primitives/button';
/** * A local area that is loading: a spinner with a visible line, silent for * the first 200 ms. Load the chart to see it; the wait is a two-second * simulation. */export default function LoadingScreenExample() {  const [loading, setLoading] = useState(false);  const load = () => {    setLoading(true);    window.setTimeout(() => setLoading(false), 2000);  };  return (    <div className="grid w-full max-w-md gap-4">      <Button        variant="outline"        className="justify-self-start"        disabled={loading}        onClick={load}      >        Load the chart      </Button>      <div className="rounded-md border">        {loading ? (          <LoadingScreen label="Loading the chart…" className="min-h-40" />        ) : (          <p className="text-muted-foreground flex min-h-40 items-center justify-center text-sm">            The chart appears here.          </p>        )}      </div>    </div>  );}