[FEATURE] Added delayMs to prevent showing the progressbar on fast pa…

README.md

@@ -40,11 +40,12 @@ export default function MyApp({ Component, pageProps }) {
 If no props are passed to `<NextNProgress />`, below is the default configuration applied.
 
 ```jsx
-<NextNProgress color="#29D" startPosition={0.3} stopDelayMs={200} height={3} showOnShallow={true} />
+<NextNProgress color="#29D" startPosition={0.3} startDelayMs={150} stopDelayMs={200} height={3} showOnShallow={true} />
 ```
 
 - `color`: to change the default color of progressbar. You can also use `rgb(,,)` or `rgba(,,,)`.
 - `startPosition`: to set the default starting position : `0.3 = 30%`.
+- `startDelayMs`: time for delay to start progressbar in `ms`.
 - `stopDelayMs`: time for delay to stop progressbar in `ms`.
 - `height`: height of progressbar in `px`.
 - `showOnShallow`: You can choose whether you want the progressbar to be displayed if you're using shallow routing. It takes a boolean. Learn more about shallow routing [in Next.js docs](https://nextjs.org/docs/routing/shallow-routing).

src/index.tsx

@@ -21,6 +21,10 @@
    */
   startPosition?: number;
   /**
+   * The start delay in milliseconds.
+   * @default 250
+   */
+  startDelayMs?: number;  /**
    * The stop delay in milliseconds.
    * @default 200
    */
@@ -57,6 +61,7 @@
 const NextNProgress = ({
   color = '#29D',
   startPosition = 0.3,
+  startDelayMs = 250,
   stopDelayMs = 200,
   height = 3,
   showOnShallow = true,
@@ -69,6 +74,7 @@
   ),
 }: NextNProgressProps) => {
   let timer: NodeJS.Timeout | null = null;
+  let timeout: NodeJS.Timeout | null = null;
 
   React.useEffect(() => {
     if (options) {
@@ -85,17 +91,17 @@
   }, []);
 
   const routeChangeStart = (
     _: string,
     {
       shallow,
     }: {
       shallow: boolean;
     },
   ) => {
-    if (!shallow || showOnShallow) {
+    timeout = setTimeout(() => {
       NProgress.set(startPosition);
       NProgress.start();
-    }
+    }, startDelayMs);
   };
 
   const routeChangeEnd = (
@@ -106,6 +112,10 @@
       shallow: boolean;
     },
   ) => {
+    if (timeout) clearTimeout(timeout);
+    if (!NProgress.isStarted()) {
+      return;
+    }
     if (!shallow || showOnShallow) {
       if (timer) clearTimeout(timer);
       timer = setTimeout(() => {
@@ -204,6 +214,7 @@
 NextNProgress.propTypes = {
   color: PropTypes.string,
   startPosition: PropTypes.number,
+  startDelayMs: PropTypes.number,
   stopDelayMs: PropTypes.number,
   height: PropTypes.number,
   showOnShallow: PropTypes.bool,