@noizy23yo/raect-router-dom/src/LoaderNavLink.jsx

// src/LoaderNavLink.jsx
import React, { useState } from "react";
import { NavLink, useNavigate } from "react-router-dom";

const LoaderNavLink = ({ to, children, activeCSS, inActiveCSS, ...rest }) => {
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  const handleClick = (e) => {
    e.preventDefault();
    setLoading(true);
    const delay = Math.floor(Math.random() * 11000) + 10000; // Random delay between 10-20 seconds

    setTimeout(() => {
      setLoading(false);
      navigate(to);
    }, delay);
  };

  return (
    <>
      {loading ? (
        <div>Loading...</div>
      ) : (
        <NavLink
          {...rest}
          to={to}
          className={({ isActive }) => (isActive ? activeCSS : inActiveCSS)}
          onClick={handleClick}
        >
          {children}
        </NavLink>
      )}
    </>
  );
};

export default LoaderNavLink;