Merge branch 'master' into master

Author: TheSGJ

.github/dependabot.yml

@@ -0,0 +1,15 @@
+# Example configuration file that:
+#  - Ignores lodash dependency
+#  - Disables version-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
+    ignore:
+      - dependency-name: "lodash"
+        # For Lodash, ignore all updates
+    # Disable version updates for npm dependencies
+    open-pull-requests-limit: 0

CHANGELOG.md

@@ -40,3 +40,9 @@
 ### Updated
 
 - Refactor the code in `useEffect` hook, removed the `next/script`
+
+## v1.2.2
+
+### Fixed
+
+- Fix the Loader gets triggered on navigation to link in another tab

README.md

@@ -86,4 +86,6 @@ If no props are passed to `<NextTopLoader />`, below is the default configuratio
 - `crawl`: auto increamenting behaviour for the TopLoader.
 - `showSpinner`: to show spinner or not.
 
-After passing the props reload the your next.js page once in the browser, to see changes for `<NextTopLoader />` ( This is because NextTopLoader uses built-in history api in browser for indicating progress. )
+[![Sponsor me on GitHub](https://img.shields.io/badge/Sponsor%20me%20on-GitHub-brightgreen)](https://github.com/sponsors/TheSGJ)
+
+[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/thesgj)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-toploader",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "A Next.js Top Loading Bar component made using nprogress, works with Next.js 13.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+
 /**
  *
  * NextTopLoader
@@ -70,21 +70,19 @@ const NextTopLoader = ({
 
   const styles = (
     <style>
-      {
-        `#nprogress{pointer-events:none}#nprogress .bar{background:${
-          color ?? defaultColor
-        };position:fixed;z-index:1031;top:0;left:0;width:100%;height:${
-          height ?? defaultHeight
-        }px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px ${
-          color ?? defaultColor
-        },0 0 5px ${
-          color ?? defaultColor
-        };opacity:1;-webkit-transform:rotate(3deg) translate(0px,-4px);-ms-transform:rotate(3deg) translate(0px,-4px);transform:rotate(3deg) translate(0px,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:${
-          color ?? defaultColor
-        };border-left-color:${
-          color ?? defaultColor
-        };border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}`
-      }
+      {`#nprogress{pointer-events:none}#nprogress .bar{background:${
+        color ?? defaultColor
+      };position:fixed;z-index:1031;top:0;left:0;width:100%;height:${
+        height ?? defaultHeight
+      }px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px ${
+        color ?? defaultColor
+      },0 0 5px ${
+        color ?? defaultColor
+      };opacity:1;-webkit-transform:rotate(3deg) translate(0px,-4px);-ms-transform:rotate(3deg) translate(0px,-4px);transform:rotate(3deg) translate(0px,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:${
+        color ?? defaultColor
+      };border-left-color:${
+        color ?? defaultColor
+      };border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}`}
     </style>
   );
 
@@ -149,13 +147,17 @@ const NextTopLoader = ({
                 [].forEach.call(npgclass, function (el: Element) {
                   el.classList.remove("nprogress-busy");
                 });
+                // eslint-disable-next-line prefer-rest-params, @typescript-eslint/no-explicit-any
                 return pushState.apply(history, arguments as any);
               };
             })(window.history);
           }
         }
       } catch (err) {
-        console.log('NextTopLoader error: ', err);
+        // Log the error in development only!
+        // console.log('NextTopLoader error: ', err);
+        NProgress.start();
+        NProgress.done();
       }
     }
 
@@ -166,8 +168,6 @@ const NextTopLoader = ({
     return () => {
       document.removeEventListener("click", handleClick);
     };
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return styles;