full upgrade

app/components/ClientProviders.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React, { useEffect, useState, Suspense, lazy } from "react";
+import { usePathname } from "next/navigation";
+import { ToastProvider } from "@/components/Toast";
+import { AnalyticsProvider } from "@/components/AnalyticsProvider";
+
+// Lazy load heavy components to avoid webpack issues
+const BackgroundBlobs = lazy(() => import("@/components/BackgroundBlobs"));
+const ChatWidget = lazy(() => import("./ChatWidget"));
+
+export default function ClientProviders({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [mounted, setMounted] = useState(false);
+  const [is404Page, setIs404Page] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    // Check if we're on a 404 page by looking for the data attribute
+    const check404 = () => {
+      if (typeof window !== "undefined") {
+        const has404Component = document.querySelector('[data-404-page]');
+        setIs404Page(!!has404Component);
+      }
+    };
+    // Check immediately and after a short delay
+    check404();
+    const timeout = setTimeout(check404, 100);
+    return () => clearTimeout(timeout);
+  }, []);
+
+  return (
+    <AnalyticsProvider>
+      <ToastProvider>
+        {mounted && (
+          <Suspense fallback={null}>
+            <BackgroundBlobs />
+          </Suspense>
+        )}
+        <div className="relative z-10">{children}</div>
+        {mounted && !is404Page && (
+          <Suspense fallback={null}>
+            <ChatWidget />
+          </Suspense>
+        )}
+      </ToastProvider>
+    </AnalyticsProvider>
+  );
+}