Skip to content

feat: add route-keyed page transitions with Framer Motion #100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kavlin-Kaur wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add route-keyed page transitions with Framer Motion #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 25 additions & 29 deletions app/clientLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,48 +4,44 @@ import type React from "react"

import { Inter } from "next/font/google"
import { motion, AnimatePresence } from "framer-motion"
import { usePathname } from "next/navigation"

import { ThemeProvider } from "@/components/theme-provider"
import { Navbar } from "@/components/navbar"
import { Footer } from "@/components/footer"
import {Toaster} from "react-hot-toast"
import { Toaster } from "react-hot-toast"
import AuthProvider from '../context/AuthProvider';

import "./globals.css"

const inter = Inter({ subsets: ["latin"] })

export default function ClientLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
const pathname = usePathname()
return (
<html lang="en" suppressHydrationWarning>
<AuthProvider>
<body className={`${inter.className} min-h-screen bg-background`}>
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false} disableTransitionOnChange>
<div className="flex min-h-screen flex-col">
<Navbar />
<main className="flex-1">
<AnimatePresence mode="wait">
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.3 }}
>
{children}
</motion.div>
</AnimatePresence>
</main>
<Footer />
</div>

<Toaster/>
</ThemeProvider>
</body>
</AuthProvider>
</html>
<AuthProvider>
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false} disableTransitionOnChange>
<div className={`${inter.className} flex min-h-screen flex-col bg-background`}>
Copy link

@coderabbitai coderabbitai bot Aug 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Apply the Inter font at the level to style portal content (e.g., Toaster)

Placing ${inter.className} on an inner div won’t affect portal-based UI (react-hot-toast renders to document.body), causing font inconsistency. Apply the font to in RootLayout and drop it from this div.

Follow-up diffs:

In app/layout.tsx (outside the shown changed lines, add import and font init):

import { Inter } from "next/font/google"
const inter = Inter({ subsets: ["latin"] })

Then within the changed block:

-  <body>
+  <body className={`${inter.className} min-h-screen bg-background antialiased`}>

In app/clientLayout.tsx (remove font from the inner container and the Inter usage here):

-import { Inter } from "next/font/google"
-const inter = Inter({ subsets: ["latin"] })
...
-        <div className={`${inter.className} flex min-h-screen flex-col bg-background`}>
+        <div className="flex min-h-screen flex-col bg-background">

This ensures consistent typography across the app, including toast notifications.

I can push a patch that applies these changes across both files if you prefer.

🤖 Prompt for AI Agents 
In app/clientLayout.tsx at line 26, remove the `${inter.className}` from the
div's className to avoid applying the Inter font only to an inner container.
Instead, import and initialize the Inter font in app/layout.tsx and apply
`${inter.className}` to the <body> element there. This change ensures consistent
font styling across portal-based UI like react-hot-toast. Also, remove any Inter
font usage from app/clientLayout.tsx accordingly.

<Navbar />
<main className="flex-1">
<AnimatePresence mode="wait" initial={false}>
<motion.div
key={pathname}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
>
{children}
</motion.div>
</AnimatePresence>
</main>
<Footer />
</div>
<Toaster />
</ThemeProvider>
</AuthProvider>
)
}
20 changes: 13 additions & 7 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,28 @@ import type { Metadata } from "next"
import ClientLayout from "./clientLayout"
import { Analytics } from "@vercel/analytics/next"

import "./globals.css"

export const metadata: Metadata = {
title: "LegalEase - Simplifying Legal Access for All",
description:
"LegalEase makes the justice system accessible through AI-powered tools, plain language explanations, and personalized guidance.",
generator: 'v0.dev'
generator: "v0.dev",
}

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return(
<ClientLayout>{children}<Analytics /></ClientLayout>
)}


import './globals.css'
return (
<html lang="en" suppressHydrationWarning>
<body>
<ClientLayout>
{children}
</ClientLayout>
<Analytics />
</body>
</html>
)
}