headplane/app/components/ProgressBar.tsx

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-mist-950 dark:bg-mist-50",
        isVisible && "animate-loading opacity-100",
      )}
    />
  );
}