import { useNavigation } from "react-router";
import { useEffect } from "react";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

NProgress.configure({ showSpinner: false });

export function NavigationProgress() {
  const { state } = useNavigation();

  useEffect(() => {
    if (state !== "idle") {
      NProgress.start();
    } else {
      NProgress.done();
    }
  }, [state]);

  return null;
}