-
-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
style: 💄 Addded Progress Indicator while navigating pages
Progress Indicator will show on top of page, when navigate to between pages ✅ Closes: #163
- Loading branch information
1 parent
37e3a17
commit 4876b35
Showing
10 changed files
with
162 additions
and
30 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| "use client"; | ||
|
|
||
| import { PropsWithChildren, useEffect } from "react"; | ||
| import Link from "next/link"; | ||
| import NProgress from "nprogress"; | ||
|
|
||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| /** | ||
| * Currently, In Next.js app router there is no way to listen to route change events, | ||
| * so i found only this solution here - https://github.com/vercel/next.js/discussions/41934#discussioncomment-7195052 | ||
| * | ||
| */ | ||
|
|
||
| // TODO: Use router events when it will be available in Next.js app router | ||
|
|
||
| /** | ||
| * Do not use this where link will remain on the same page, It will work only where link component will dismount | ||
| * @param param0 | ||
| * @returns | ||
| */ | ||
| export const LinkN: React.FC< | ||
| PropsWithChildren<{ | ||
| href: string; | ||
| target?: string; | ||
| rel?: string; | ||
| className?: string; | ||
| }> | ||
| > = ({ href, children, className, target, rel }) => { | ||
| NProgress.configure({ showSpinner: false }); | ||
|
|
||
| useEffect(() => { | ||
| return () => { | ||
| NProgress.done(); | ||
| }; | ||
| }, []); | ||
|
|
||
| const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => { | ||
| if (shouldStartAnimation(e)) { | ||
| NProgress.start(); | ||
| } | ||
| }; | ||
|
|
||
| const handleKeyDown = (e: React.KeyboardEvent<HTMLAnchorElement>) => { | ||
| if (shouldStartAnimation(e)) { | ||
| NProgress.start(); | ||
| } | ||
| }; | ||
|
|
||
| const shouldStartAnimation = ( | ||
| e: | ||
| | React.MouseEvent<HTMLAnchorElement> | ||
| | React.KeyboardEvent<HTMLAnchorElement>, | ||
| ): boolean => { | ||
| // Check if it's a left mouse click without any keyboard modifiers | ||
| if ( | ||
| (e as React.MouseEvent<HTMLAnchorElement>).button === 0 && | ||
| !(e as React.MouseEvent<HTMLAnchorElement>).ctrlKey && | ||
| !(e as React.MouseEvent<HTMLAnchorElement>).shiftKey && | ||
| !(e as React.MouseEvent<HTMLAnchorElement>).metaKey | ||
| ) { | ||
| // Get the current pathname from window.location | ||
| const currentPathname = window.location.pathname; | ||
|
|
||
| // Check if the link's href is the same as the current pathname | ||
| if (href === currentPathname) { | ||
| return false; // Don't start the animation for same route links | ||
| } | ||
|
|
||
| // Check if link will open new window or tab | ||
| if (target && target !== "_self") { | ||
| return false; | ||
| } | ||
|
|
||
| return true; | ||
| } | ||
|
|
||
| // Check for middle mouse button click | ||
| if ((e as React.MouseEvent<HTMLAnchorElement>).button === 1) { | ||
| return false; | ||
| } | ||
|
|
||
| // Check for right mouse button click | ||
| if ((e as React.MouseEvent<HTMLAnchorElement>).button === 2) { | ||
| return false; | ||
| } | ||
|
|
||
| // Check if it's an accessibility event (e.g., screen reader activation) | ||
| if ( | ||
| e.type === "click" && | ||
| (e as React.MouseEvent<HTMLAnchorElement>).detail === 0 | ||
| ) { | ||
| return true; | ||
| } | ||
|
|
||
| return false; | ||
| }; | ||
|
|
||
| return ( | ||
| <Link href={href} legacyBehavior> | ||
| <a | ||
| onClick={handleClick} | ||
| onKeyDown={handleKeyDown} | ||
| tabIndex={0} | ||
| className={cn(className)} // Ensure the link is keyboard focusable | ||
| target={target} | ||
| rel={rel} | ||
| > | ||
| {children} | ||
| </a> | ||
| </Link> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters