perf: eliminate next-themes and framer-motion from initial JS bundle

- Replace next-themes (38 KiB) with a tiny custom ThemeProvider (~< 1 KiB) using localStorage + classList.toggle for theme management - Add FOUC-prevention inline script in layout.tsx to apply saved theme before React hydrates - Remove framer-motion from Header.tsx: nav entry now uses CSS slideDown keyframe, mobile menu uses CSS opacity/translate transitions - Remove framer-motion from ThemeToggle.tsx: use Tailwind hover/active scale - Remove framer-motion from legal-notice and privacy-policy pages - Update useTheme import in ThemeToggle to use custom ThemeProvider - Add slideDown keyframe to tailwind.config.ts - Update tests to mock custom ThemeProvider instead of next-themes Result: framer-motion moves from "First Load JS shared by all" to lazy chunks; next-themes chunk eliminated entirely; -38 KiB from initial bundle Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-06 17:39:29 +01:00
parent 7f7ed39b0e
commit dacec18956
11 changed files with 94 additions and 91 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -32,6 +32,8 @@ export default async function RootLayout({
    <html lang={locale} suppressHydrationWarning>
      <head>
        <meta charSet="utf-8" />
+        {/* Prevent flash of unstyled theme — reads localStorage before React hydrates */}
+        <script dangerouslySetInnerHTML={{ __html: `try{var t=localStorage.getItem('theme');if(t==='dark')document.documentElement.classList.add('dark');}catch(e){}` }} />
      </head>
      <body className={`${inter.variable} ${playfair.variable}`} suppressHydrationWarning>
        <div className="grain-overlay" aria-hidden="true" />