27 lines
578 B
TypeScript
27 lines
578 B
TypeScript
import { useProgressBar } from 'react-aria';
|
|
import cn from '~/utils/cn';
|
|
|
|
export interface ProgressBarProps {
|
|
isVisible: boolean;
|
|
}
|
|
|
|
export default function ProgressBar(props: ProgressBarProps) {
|
|
const { isVisible } = props;
|
|
const { progressBarProps } = useProgressBar({
|
|
label: 'Loading...',
|
|
isIndeterminate: true,
|
|
});
|
|
|
|
return (
|
|
<div
|
|
{...progressBarProps}
|
|
aria-hidden={!isVisible}
|
|
className={cn(
|
|
'fixed top-0 left-0 z-50 w-1/2 h-1 opacity-0',
|
|
'bg-headplane-950 dark:bg-headplane-50',
|
|
isVisible && 'animate-loading opacity-100',
|
|
)}
|
|
/>
|
|
);
|
|
}
|