From 7d85446ac59ac6e78f3654c3024f19b24662992f Mon Sep 17 00:00:00 2001 From: gbanyan Date: Fri, 13 Feb 2026 23:07:51 +0800 Subject: [PATCH] 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 --- app/blog/[slug]/page.tsx | 2 +- app/layout.tsx | 53 +++++++++++++++++++------------ app/page.tsx | 2 +- app/pages/[slug]/page.tsx | 2 +- app/tags/page.tsx | 2 +- app/template.tsx | 23 +++++++++++--- components/nav-menu.tsx | 2 +- components/post-card.tsx | 2 +- components/post-list-item.tsx | 2 +- components/post-storyline-nav.tsx | 2 +- components/repo-card.tsx | 2 +- components/right-sidebar.tsx | 2 +- components/site-header.tsx | 2 +- package-lock.json | 42 +++++++++++++++++++++--- package.json | 2 ++ styles/globals.css | 11 +++++-- 16 files changed, 110 insertions(+), 43 deletions(-) diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx index 2ad2aca..69f49dd 100644 --- 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'; diff --git a/app/layout.tsx b/app/layout.tsx index b085bfc..b5b00db 100644 --- 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 ( - - - {/* Preconnect to Google Fonts for faster font loading */} - - - - - - -