feat: add page transition animations and loading indicators

- Add nextjs-toploader for instant top progress bar on navigation - Add next-view-transitions for View Transitions API page transitions - Enhance template.tsx page enter animation (0.45s, scale effect) - Replace next/link with next-view-transitions Link for smooth transitions - Add prefers-reduced-motion support for accessibility Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-13 23:07:51 +08:00
parent a4e88fa506
commit 7d85446ac5
16 changed files with 110 additions and 43 deletions
--- a/app/blog/[slug]/page.tsx
+++ b/app/blog/[slug]/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -6,6 +6,8 @@ import { ThemeProvider } from 'next-themes';
 import { Playfair_Display, LXGW_WenKai_TC } from 'next/font/google';
 import { JsonLd } from '@/components/json-ld';
 import { WebVitals } from '@/components/web-vitals';
+import { ViewTransitions } from 'next-view-transitions';
+import NextTopLoader from 'nextjs-toploader';

 const playfair = Playfair_Display({
  subsets: ['latin'],
@@ -98,19 +100,27 @@ export default function RootLayout({
  };

  return (
-    <html lang={siteConfig.defaultLocale} suppressHydrationWarning className={`${playfair.variable} ${lxgwWenKai.variable}`}>
-      <head>
-        {/* Preconnect to Google Fonts for faster font loading */}
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
-      </head>
-      <body>
-        <JsonLd data={websiteSchema} />
-        <JsonLd data={organizationSchema} />
-        <style
-          // Set CSS variables for accent colors (light + dark variants)
-          dangerouslySetInnerHTML={{
-            __html: `
+    <ViewTransitions>
+      <html lang={siteConfig.defaultLocale} suppressHydrationWarning className={`${playfair.variable} ${lxgwWenKai.variable}`}>
+        <head>
+          {/* Preconnect to Google Fonts for faster font loading */}
+          <link rel="preconnect" href="https://fonts.googleapis.com" />
+          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        </head>
+        <body>
+          <NextTopLoader
+            color={theme.accent}
+            height={3}
+            showSpinner={false}
+            speed={200}
+            shadow={`0 0 10px ${theme.accent}, 0 0 5px ${theme.accent}`}
+          />
+          <JsonLd data={websiteSchema} />
+          <JsonLd data={organizationSchema} />
+          <style
+            // Set CSS variables for accent colors (light + dark variants)
+            dangerouslySetInnerHTML={{
+              __html: `
              :root {
                --color-accent: ${theme.accent};
                --color-accent-soft: ${theme.accentSoft};
@@ -118,13 +128,14 @@ export default function RootLayout({
                --color-accent-text-dark: ${theme.accentTextDark};
              }
            `
-          }}
-        />
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <LayoutShell>{children}</LayoutShell>
-        </ThemeProvider>
-        <WebVitals />
-      </body>
-    </html>
+            }}
+          />
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            <LayoutShell>{children}</LayoutShell>
+          </ThemeProvider>
+          <WebVitals />
+        </body>
+      </html>
+    </ViewTransitions>
  );
 }
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import { getAllPostsSorted } from '@/lib/posts';
 import { siteConfig } from '@/lib/config';
 import { PostListItem } from '@/components/post-list-item';
--- a/app/pages/[slug]/page.tsx
+++ b/app/pages/[slug]/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
--- a/app/tags/page.tsx
+++ b/app/tags/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import type { Metadata } from 'next';
 import { FiTag, FiTrendingUp } from 'react-icons/fi';
 import { getAllTagsWithCount } from '@/lib/posts';
--- a/app/template.tsx
+++ b/app/template.tsx
@@ -1,20 +1,35 @@
 'use client';

-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';

 export default function Template({ children }: { children: React.ReactNode }) {
  const containerRef = useRef<HTMLDivElement>(null);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(true);
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setPrefersReducedMotion(mq.matches);
+    const handler = () => setPrefersReducedMotion(mq.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

+    if (prefersReducedMotion) {
+      container.style.animation = 'none';
+      container.style.opacity = '1';
+      container.style.transform = 'none';
+      return;
+    }
+
    // Trigger animation on mount
    container.style.animation = 'none';
-    // Force reflow
    void container.offsetHeight;
-    container.style.animation = 'pageEnter 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards';
-  }, [children]);
+    container.style.animation = 'pageEnter 0.45s cubic-bezier(0.32, 0.72, 0, 1) forwards';
+  }, [children, prefersReducedMotion]);

  return (
    <div ref={containerRef} className="page-transition">
--- a/components/nav-menu.tsx
+++ b/components/nav-menu.tsx
@@ -19,7 +19,7 @@ import {
  FiChevronDown,
  FiChevronRight
 } from 'react-icons/fi';
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import { usePathname } from 'next/navigation';

 export type IconKey =
--- a/components/post-card.tsx
+++ b/components/post-card.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import Image from 'next/image';
 import type { Post } from 'contentlayer2/generated';
 import { siteConfig } from '@/lib/config';
--- a/components/post-list-item.tsx
+++ b/components/post-list-item.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import Image from 'next/image';
 import { Post } from 'contentlayer2/generated';
 import { siteConfig } from '@/lib/config';
--- a/components/post-storyline-nav.tsx
+++ b/components/post-storyline-nav.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import { Post } from 'contentlayer2/generated';
 import { FiArrowLeft, FiArrowRight } from 'react-icons/fi';

--- a/components/repo-card.tsx
+++ b/components/repo-card.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import { FiExternalLink } from 'react-icons/fi';
 import type { RepoSummary } from '@/lib/github';
 import { getLanguageColor } from '@/lib/github-lang-colors';
--- a/components/right-sidebar.tsx
+++ b/components/right-sidebar.tsx
@@ -1,6 +1,6 @@
 'use client';

-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import Image from 'next/image';
 import { useEffect, useRef, useState } from 'react';
 import { FaGithub, FaMastodon, FaLinkedin } from 'react-icons/fa';
--- a/components/site-header.tsx
+++ b/components/site-header.tsx
@@ -1,6 +1,6 @@
 'use client';

-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import { useState } from 'react';
 import dynamic from 'next/dynamic';
 import { ThemeToggle } from './theme-toggle';
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,8 @@
        "next": "^16.0.7",
        "next-contentlayer2": "^0.5.8",
        "next-themes": "^0.4.6",
+        "next-view-transitions": "^0.3.5",
+        "nextjs-toploader": "^3.9.17",
        "react": "^19.2.1",
        "react-dom": "^19.2.1",
        "react-icons": "^5.5.0",
@@ -7265,7 +7267,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/js-yaml": {
@@ -7723,7 +7724,6 @@
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "js-tokens": "^3.0.0 || ^4.0.0"
@@ -9125,6 +9125,17 @@
        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
      }
    },
+    "node_modules/next-view-transitions": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/next-view-transitions/-/next-view-transitions-0.3.5.tgz",
+      "integrity": "sha512-yP8OPNydLmKpmE94hLurLGEzPsUy1uyl9iSv8oxaC2JwhSXTD86SVwk1NMMQT7Ado4kMENDJ7fNBIXHy3GU/Lg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "next": ">=14.0.0",
+        "react": ">=18.2.0 || ^19.0.0",
+        "react-dom": ">=18.2.0 || ^19.0.0"
+      }
+    },
    "node_modules/next/node_modules/postcss": {
      "version": "8.4.31",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -9153,6 +9164,24 @@
        "node": "^10 || ^12 || >=14"
      }
    },
+    "node_modules/nextjs-toploader": {
+      "version": "3.9.17",
+      "resolved": "https://registry.npmjs.org/nextjs-toploader/-/nextjs-toploader-3.9.17.tgz",
+      "integrity": "sha512-9OF0KSSLtoSAuNg2LZ3aTl4hR9mBDj5L9s9DZiFCbMlXehyICGjkIz5dVGzuATU2bheJZoBdFgq9w07AKSuQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "nprogress": "^0.2.0",
+        "prop-types": "^15.8.1"
+      },
+      "funding": {
+        "url": "https://buymeacoffee.com/thesgj"
+      },
+      "peerDependencies": {
+        "next": ">= 6.0.0",
+        "react": ">= 16.0.0",
+        "react-dom": ">= 16.0.0"
+      }
+    },
    "node_modules/no-case": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
@@ -9179,11 +9208,16 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==",
+      "license": "MIT"
+    },
    "node_modules/object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@@ -9613,7 +9647,6 @@
      "version": "15.8.1",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "loose-envify": "^1.4.0",
@@ -9719,7 +9752,6 @@
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/readdirp": {
--- a/package.json
+++ b/package.json
@@ -25,6 +25,8 @@
    "next": "^16.0.7",
    "next-contentlayer2": "^0.5.8",
    "next-themes": "^0.4.6",
+    "next-view-transitions": "^0.3.5",
+    "nextjs-toploader": "^3.9.17",
    "react": "^19.2.1",
    "react-dom": "^19.2.1",
    "react-icons": "^5.5.0",
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -122,11 +122,11 @@ body {
@keyframes pageEnter {
  from {
    opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(16px) scale(0.99);
  }
  to {
    opacity: 1;
-    transform: translateY(0);
+    transform: translateY(0) scale(1);
  }
 }

@@ -134,6 +134,13 @@ body {
  opacity: 0;
 }

+@media (prefers-reduced-motion: reduce) {
+  .page-transition {
+    opacity: 1;
+    transform: none;
+  }
+}
+
 /* Scroll reveal animations - CSS only */
 .scroll-reveal {
  opacity: 0;