🧑‍💻 finish loader on click to new tab (#123)

Fredkiss3 · Jan 5, 2024 · c0f001a · c0f001a
1 parent 42fe696
commit c0f001a
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/src/components/top-loader.tsx b/src/components/top-loader.tsx
@@ -20,5 +20,22 @@ function FinishingLoader() {
   React.useEffect(() => {
     NProgress.done();
   }, [pathname, router, searchParams]);
+  React.useEffect(() => {
+    const linkClickListener = (ev: MouseEvent) => {
+      const element = ev.target as HTMLElement;
+      const closestlink = element.closest("a");
+      const isOpenToNewTabClick =
+        ev.ctrlKey ||
+        ev.shiftKey ||
+        ev.metaKey || // apple
+        (ev.button && ev.button == 1); // middle click, >IE9 + everyone else
+
+      if (closestlink && isOpenToNewTabClick) {
+        NProgress.done();
+      }
+    };
+    window.addEventListener("click", linkClickListener);
+    return () => window.removeEventListener("click", linkClickListener);
+  }, []);
   return null;
 }