The loading line of the shell

// apps/docs/examples/ui/app-loading-bar.tsx'use client';
import {useState} from 'react';
import {  AppLoadingBar,  AppLoadingProvider,  useAppLoadingRegistration,} from '@workspace/active-ui/components/composed/app-loading-bar';import {Button} from '@workspace/active-ui/components/primitives/button';
/** A source of waiting: registered while `active`. */function Wait({active}: {active: boolean}) {  useAppLoadingRegistration(active);  return null;}
/** * The loading line of an application shell: the frame stands for the * content column, the line hangs on its top edge. Two sources wait for two * and four seconds; the line stays until both are done. In an application * a Suspense boundary reports with `AppLoadingSignal` as its fallback. */export default function AppLoadingBarExample() {  const [first, setFirst] = useState(false);  const [second, setSecond] = useState(false);  const start = () => {    setFirst(true);    setSecond(true);    window.setTimeout(() => setFirst(false), 2000);    window.setTimeout(() => setSecond(false), 4000);  };  return (    <AppLoadingProvider>      <div className="relative w-full max-w-xl overflow-hidden rounded-md border">        <AppLoadingBar label="Loading" />        <Wait active={first} />        <Wait active={second} />        <div className="grid gap-3 p-6">          <Button            variant="outline"            className="justify-self-start"            disabled={first || second}            onClick={start}          >            Start two waits          </Button>          <p className="text-muted-foreground text-sm">            Waiting: {[first, second].filter(Boolean).length}          </p>        </div>      </div>    </AppLoadingProvider>  );}