const router = useRouter();
 useEffect(() => {
    if (router.isReady) {
      setLoading(false); // Set loading to false when the route is ready
    }
  }, [router.isReady]);

  const router = useRouter();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const handleRouteChange = () => {
      setLoading(true); // Set loading to true when route starts changing
    };

    const handleRouteComplete = () => {
      setLoading(false); // Set loading to false when route has finished loading
    };

    router.events.on('routeChangeStart', handleRouteChange);
    router.events.on('routeChangeComplete', handleRouteComplete);
    router.events.on('routeChangeError', handleRouteComplete); // Handle route change errors

    // Cleanup the event listeners
    return () => {
      router.events.off('routeChangeStart', handleRouteChange);
      router.events.off('routeChangeComplete', handleRouteComplete);
      router.events.off('routeChangeError', handleRouteComplete);
    };
  }, [router.events]);