portfolio/app/components/ClientProviders.tsx

"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";
import "../../bones/registry";

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>
  );
}