Merge pull request #14 from frak-id/feat/pages-transitions

💫 Add pages transitions and loading bar on top
frak-id · May 16, 2024 · f401b8d · f401b8d
2 parents 0b96dd3 + 4388cd4
commit f401b8d
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 3 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/wallet/package.json b/packages/wallet/package.json
@@ -45,6 +45,7 @@
     "mongodb": "^6.5.0",
     "next": "14.2.3",
     "next-qrcode": "^2.5.1",
+    "nextjs-toploader": "^1.6.12",
     "normalize.css": "^8.0.1",
     "permissionless": "0.1.16",
     "radash": "^12.1.0",
@@ -63,8 +64,10 @@
   },
   "devDependencies": {
     "@simplewebauthn/types": "^10.0.0",
+    "@types/dom-view-transitions": "^1.0.4",
     "@types/humanize-duration": "^3.27.4",
     "@types/node": "^20",
+    "@types/nprogress": "^0.2.3",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/react-slick": "^0.23.13",

diff --git a/packages/wallet/src/app/layout.tsx b/packages/wallet/src/app/layout.tsx
@@ -5,6 +5,7 @@ import "@/styles/all.css";
 import type { Metadata, Viewport } from "next";
 import { Sora } from "next/font/google";
 import Script from "next/script";
+import NextTopLoader from "nextjs-toploader";
 import type { ReactNode } from "react";
 import styles from "./layout.module.css";
 
@@ -60,6 +61,7 @@ export default async function RootLayout({
     return (
         <html lang="en" suppressHydrationWarning>
             <body className={`scrollbars ${sora.className}`}>
+                <NextTopLoader showSpinner={false} />
                 <div className={"desktop scrollbars"}>
                     <main className={styles.main}>
                         <div className={styles.inner}>

diff --git a/packages/wallet/src/module/common/component/NavigationItem/index.tsx b/packages/wallet/src/module/common/component/NavigationItem/index.tsx
@@ -1,4 +1,5 @@
-import { usePathname, useRouter } from "next/navigation";
+import { useAnimatedRouter } from "@/module/common/hook/useAnimatedRouter";
+import { usePathname } from "next/navigation";
 import type { PropsWithChildren } from "react";
 import styles from "./index.module.css";
 
@@ -12,18 +13,18 @@ export function NavigationItem({
     disabled = false,
     url,
 }: PropsWithChildren<NavigationProps>) {
-    const router = useRouter();
     const pathname = usePathname();
     const activeClassName = pathname.startsWith(url)
         ? styles["navigation__button--active"]
         : "";
+    const { navigateWithTransition } = useAnimatedRouter();
 
     return (
         <li>
             <button
                 type={"button"}
                 className={`${styles.navigation__button} ${activeClassName}`}
-                onClick={() => router.push(url)}
+                onClick={() => navigateWithTransition(url)}
                 disabled={disabled}
             >
                 {children}

diff --git a/packages/wallet/src/module/common/hook/useAnimatedRouter.ts b/packages/wallet/src/module/common/hook/useAnimatedRouter.ts
@@ -0,0 +1,22 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import * as NProgress from "nprogress";
+
+export function useAnimatedRouter() {
+    const router = useRouter();
+
+    const navigateWithTransition = async (url: string) => {
+        NProgress.start();
+        if (document?.startViewTransition) {
+            const transition = document.startViewTransition(() =>
+                router.push(url)
+            );
+            await transition.finished;
+        } else {
+            router.push(url);
+        }
+    };
+
+    return { navigateWithTransition };
+}
diff --git a/packages/wallet/src/styles/colors.css b/packages/wallet/src/styles/colors.css
@@ -40,4 +40,18 @@
     /* url encoded of background-dark.svg */
     --frak-background-image-dark: url("data:image/svg+xml,%3Csvg%20width%3D%22430%22%20height%3D%22954%22%20viewBox%3D%220%200%20430%20954%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20width%3D%22430%22%20height%3D%22953.093%22%20fill%3D%22url(%23paint0_radial_8797_1493)%22%2F%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3CradialGradient%20id%3D%22paint0_radial_8797_1493%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20gradientTransform%3D%22translate(110.5%20431.5)%20rotate(48.8603)%20scale(582.918%20262.991)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23194380%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2303193A%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FradialGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%3C%2Fsvg%3E%0A");
     --frak-shadow-color: #00000040;
+    --frak-color-gradient: linear-gradient(
+            55deg,
+            #8b5eb3 11.39%,
+            #b155b3 13.1%,
+            #b13fb3 17.35%,
+            #b12fb3 21.61%,
+            #b125b3 27.57%,
+            #b123b3 34.39%,
+            #6e5cca 45.46%,
+            #338ede 56.53%,
+            #0faeeb 65.04%,
+            #02baf0 69.3%,
+            #02e6d5 86.33%
+    );
 }
diff --git a/packages/wallet/src/styles/global.css b/packages/wallet/src/styles/global.css
@@ -160,3 +160,8 @@ sup {
 .scrollbars::-webkit-scrollbar-track { /* Background */
     background: var(--scrollbar-background);
 }
+
+/* nextjs-toploader */
+#nprogress .bar {
+    background: var(--frak-color-gradient) !important;
+}