Function RouteProgressBar

packages/shared/src/components/RouteProgressBar.tsx:26–69

({
  className,
}: RouteProgressBarProps)

 * wrapper) and it floats at the top edge without affecting layout.
 */
export const RouteProgressBar = ({
  className,
}: RouteProgressBarProps): ReactElement | null => {
  const router = useRouter();
  const [isRouteChanging, setIsRouteChanging] = useState(false);

  useEffect(() => {
    const handleStart = () => setIsRouteChanging(true);
    const handleEnd = () => setIsRouteChanging(false);

    router.events.on('routeChangeStart', handleStart);
    router.events.on('routeChangeComplete', handleEnd);
    router.events.on('routeChangeError', handleEnd);

    return () => {
      router.events.off('routeChangeStart', handleStart);
      router.events.off('routeChangeComplete', handleEnd);
      router.events.off('routeChangeError', handleEnd);
    };
  }, [router.events]);

  if (!isRouteChanging) {
    return null;
  }

  return (
    <div
      role="progressbar"
      aria-busy="true"
      aria-label="Loading next page"
      className={classNames(
        'pointer-events-none absolute inset-x-0 top-0 z-1 h-0.5 overflow-hidden',
        className,
      )}
    >
      <div
        className={classNames(
          'h-full w-1/4 rounded-full bg-accent-cabbage-default',
          styles.bar,
        )}
      />
    </div>
  );
};