Lazy load notification and keep-online providers
Introduced NotificationProviderWrapper to dynamically load the notification context only on dashboard pages, reducing initial bundle size. KeepOnline component is now also lazy-loaded. Updated app layout to use the new wrapper.
This commit is contained in:
34
components/layout/NotificationProviderWrapper.tsx
Normal file
34
components/layout/NotificationProviderWrapper.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
"use client";
|
||||
|
||||
import { usePathname } from "next/navigation";
|
||||
import dynamic from "next/dynamic";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
// Lazy load NotificationProvider - only needed on dashboard pages
|
||||
// This saves ~5-10KB from initial bundle since it includes polling logic and API calls
|
||||
const NotificationProvider = dynamic(
|
||||
() => import("@/lib/notification-context").then(mod => ({ default: mod.NotificationProvider })),
|
||||
{
|
||||
ssr: false,
|
||||
loading: () => null
|
||||
}
|
||||
);
|
||||
|
||||
interface NotificationProviderWrapperProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function NotificationProviderWrapper({ children }: NotificationProviderWrapperProps) {
|
||||
const pathname = usePathname();
|
||||
|
||||
// Only load NotificationProvider on dashboard pages (but not admin pages)
|
||||
const isDashboardPage = pathname?.includes("/dashboard") && !pathname?.includes("/dashboard/admin");
|
||||
|
||||
if (isDashboardPage) {
|
||||
return <NotificationProvider>{children}</NotificationProvider>;
|
||||
}
|
||||
|
||||
// On non-dashboard pages, render children without provider
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user