denshooter
dacec18956
- 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>
73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import { usePathname } from "next/navigation";
|
|
import dynamic from "next/dynamic";
|
|
import { ToastProvider } from "@/components/Toast";
|
|
import ErrorBoundary from "@/components/ErrorBoundary";
|
|
import { ConsentProvider } from "./ConsentProvider";
|
|
import { ThemeProvider } from "./ThemeProvider";
|
|
|
|
const BackgroundBlobs = dynamic(
|
|
() => import("@/components/BackgroundBlobs").catch(() => ({ default: () => null })),
|
|
{ ssr: false, loading: () => null }
|
|
);
|
|
|
|
export default function ClientProviders({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const [mounted, setMounted] = useState(false);
|
|
const pathname = usePathname();
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, [pathname]);
|
|
|
|
return (
|
|
<ErrorBoundary>
|
|
<ErrorBoundary>
|
|
<ConsentProvider>
|
|
<ThemeProvider>
|
|
<GatedProviders mounted={mounted}>
|
|
{children}
|
|
</GatedProviders>
|
|
</ThemeProvider>
|
|
</ConsentProvider>
|
|
</ErrorBoundary>
|
|
</ErrorBoundary>
|
|
);
|
|
}
|
|
|
|
function GatedProviders({
|
|
children,
|
|
mounted,
|
|
}: {
|
|
children: React.ReactNode;
|
|
mounted: boolean;
|
|
}) {
|
|
// Defer animated background blobs until after LCP
|
|
const [deferredReady, setDeferredReady] = useState(false);
|
|
useEffect(() => {
|
|
if (!mounted) return;
|
|
let id: ReturnType<typeof setTimeout> | number;
|
|
if (typeof requestIdleCallback !== "undefined") {
|
|
id = requestIdleCallback(() => setDeferredReady(true), { timeout: 5000 });
|
|
return () => cancelIdleCallback(id as number);
|
|
} else {
|
|
id = setTimeout(() => setDeferredReady(true), 200);
|
|
return () => clearTimeout(id);
|
|
}
|
|
}, [mounted]);
|
|
|
|
return (
|
|
<ErrorBoundary>
|
|
<ToastProvider>
|
|
{deferredReady && <BackgroundBlobs />}
|
|
<div className="relative z-10">{children}</div>
|
|
</ToastProvider>
|
|
</ErrorBoundary>
|
|
);
|
|
}
|