- Replace Suspense with useEffect for better control over component mounting. - Update loading indicators with fixed positioning and enhanced styling for a terminal-like appearance. - Modify KernelPanic404 component to improve text color handling and ensure proper visibility. - Introduce checks for 404 page detection based on pathname and data attributes for more accurate rendering.
59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
"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);
|
|
const pathname = usePathname();
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
// Check if we're on a 404 page by looking for the data attribute or pathname
|
|
const check404 = () => {
|
|
if (typeof window !== "undefined") {
|
|
const has404Component = document.querySelector('[data-404-page]');
|
|
const is404Path = pathname === '/404' || window.location.pathname === '/404' || window.location.pathname.includes('404');
|
|
setIs404Page(!!has404Component || is404Path);
|
|
}
|
|
};
|
|
// Check immediately and after a short delay
|
|
check404();
|
|
const timeout = setTimeout(check404, 100);
|
|
const interval = setInterval(check404, 500);
|
|
return () => {
|
|
clearTimeout(timeout);
|
|
clearInterval(interval);
|
|
};
|
|
}, [pathname]);
|
|
|
|
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>
|
|
);
|
|
}
|