portfolio/app/components/RootProviders.tsx

"use client";

import React, { useEffect, useState } from "react";

const ToastProvider = React.lazy(() =>
  import("@/components/Toast").then((mod) => ({
    default: mod.ToastProvider,
  }))
);

const BackgroundBlobs = React.lazy(() =>
  import("@/components/BackgroundBlobs")
);

const ChatWidget = React.lazy(() => import("./ChatWidget"));

export default function RootProviders({
  children,
}: {
  children: React.ReactNode;
}) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return <div className="relative z-10">{children}</div>;
  }

  return (
    <React.Suspense fallback={<div className="relative z-10">{children}</div>}>
      <ToastProvider>
        <BackgroundBlobs />
        <div className="relative z-10">{children}</div>
        <ChatWidget />
      </ToastProvider>
    </React.Suspense>
  );
}