HeaderClient updated

src/app/layout.tsx

@@ -33,7 +33,8 @@ import { ThemeProvider } from "@/components/ThemeProvider";
 import { CompareProvider } from "@/context/CompareContext";
 import CompareBar from "@/components/CompareBar";
 import MouseAnimation from "@/components/MouseAnimation";
-import HeaderWrapper from "@/components/HeaderWrapper";
+import HeaderClient from "@/components/HeaderClient";
+// import HeaderWrapper from "@/components/HeaderWrapper";
 
 export default function RootLayout({
   children,
@@ -60,7 +61,7 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <CompareProvider>
-            <HeaderWrapper />
+            <HeaderClient />
             {children}
             <CompareBar />
             {/* <MouseAnimation /> */}

src/components/HeaderClient.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const Header = dynamic(() => import("./Header"), {
+  ssr: false,
+});
+
+export default function HeaderClient() {
+  return <Header />;
+}

src/components/HeaderWrapper.tsx

@@ -1,15 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-import Header from "./Header";
-
-export default function HeaderWrapper() {
-    const [mounted, setMounted] = useState(false);
-
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-
-    if (!mounted) return null;
-
-    return <Header />;
-}