Fix progress bar "sticking", and fix "shallow" not defined (destructuring) on route

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@approximant/next-progress",
-  "version": "0.1.0",
+  "name": "@audiu/next-progress",
+  "version": "0.1.6",
   "description": "NProgress component for Next.js app.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/approximant/next-progress.git"
+    "url": "git+https://github.com/audiu/next-progress.git"
   },
   "keywords": [
     "Nprogress",
@@ -24,7 +24,8 @@
   "author": "Eamon Ma",
   "contributors": [
     "Eamon Ma",
-    "Apal Shah"
+    "Apal Shah",
+    "Mike Goodfellow"
   ],
   "license": "MIT",
   "bugs": {

src/index.tsx

@@ -9,6 +9,10 @@ import * as NProgress from 'nprogress';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 
+interface RouteProps {
+  shallow: boolean;
+}
+
 export interface NextProgressProps {
   /**
    * The color of the bar.
@@ -72,7 +76,6 @@ const NextProgress = ({
 }: NextProgressProps) => {
   let timer: NodeJS.Timeout | null = null;
   let debounceTimer: NodeJS.Timeout | null = null;
-  let isStarted = false;
 
   React.useEffect(() => {
     if (options) {
@@ -90,68 +93,52 @@ const NextProgress = ({
 
   const routeChangeStart = (
     _: string,
-    {
-      shallow,
-    }: {
-      shallow: boolean;
-    }
+    cfg: RouteProps
   ) => {
-    if (shallow && !showOnShallow) return;
+    if (cfg?.shallow && !showOnShallow) return;
 
     if (debounceTimer) {
       clearTimeout(debounceTimer);
     }
 
     debounceTimer = setTimeout(() => {
-      isStarted = true;
       NProgress.set(startPosition);
       NProgress.start();
+
     }, debounce);
   };
 
   const routeChangeEnd = (
-    _: string,
-    {
-      shallow,
-    }: {
-      shallow: boolean;
-    }
+    _: string
   ) => {
-    if (debounceTimer && !isStarted) {
+    if (debounceTimer) {
       clearTimeout(debounceTimer);
-      return;
     }
 
-    if (shallow && !showOnShallow) return;
+    if (timer) {
+      clearTimeout(timer);
+    }
 
-    if (timer) clearTimeout(timer);
     timer = setTimeout(() => {
-      isStarted = false;
-      NProgress.done(true);
-    }, stopDelayMs);
+      NProgress.done();
+      }, stopDelayMs);
   };
 
   const routeChangeError = (
     _err: Error,
-    _url: string,
-    {
-      shallow,
-    }: {
-      shallow: boolean;
-    }
+    _url: string
   ) => {
-    if (debounceTimer && !isStarted) {
+    if (debounceTimer) {
       clearTimeout(debounceTimer);
-      return;
     }
 
-    if (shallow && !showOnShallow) return;
+    if (timer) {
+      clearTimeout(timer);
+    }
 
-    if (timer) clearTimeout(timer);
     timer = setTimeout(() => {
-      isStarted = false;
-      NProgress.done(true);
-    }, stopDelayMs);
+      NProgress.done();
+      }, stopDelayMs);
   };
 
   return transformCSS(`