g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Lazy load notification and keep-online providers

Browse Source 
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:
g
2025-12-31 07:11:10 +00:00
parent 2777cfda0b
commit 37a8cfed82
4 changed files with 47 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/layout.tsx
View File

@@ -3,9 +3,9 @@ import "./globals.css"
import { ThemeProvider } from "@/components/layout/theme-provider" import { ThemeProvider } from "@/components/layout/theme-provider"
import { Toaster } from "sonner" import { Toaster } from "sonner"
import type React from "react" import type React from "react"
import { NotificationProvider } from "@/lib/notification-context"
import { Metadata, Viewport } from "next" import { Metadata, Viewport } from "next"
import KeepOnlineWrapper from "@/components/layout/KeepOnlineWrapper" import KeepOnlineWrapper from "@/components/layout/KeepOnlineWrapper"
import { NotificationProviderWrapper } from "@/components/layout/NotificationProviderWrapper"
// Christmas theme disabled // Christmas theme disabled
// import { ChristmasDecorations } from "@/components/christmas-decorations" // import { ChristmasDecorations } from "@/components/christmas-decorations"
// import { isDecember } from "@/lib/utils/christmas" // import { isDecember } from "@/lib/utils/christmas"
@@ -78,7 +78,7 @@ export default function RootLayout({
<html lang="en" suppressHydrationWarning className="dark"> <html lang="en" suppressHydrationWarning className="dark">
<body className={inter.className}> <body className={inter.className}>
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange> <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
<NotificationProvider> <NotificationProviderWrapper>
{/* Christmas decorations disabled */} {/* Christmas decorations disabled */}
<Toaster <Toaster
theme="dark" theme="dark"
@@ -87,7 +87,7 @@ export default function RootLayout({
/> />
<KeepOnlineWrapper /> <KeepOnlineWrapper />
{children} {children}
</NotificationProvider> </NotificationProviderWrapper>
</ThemeProvider> </ThemeProvider>
</body> </body>
</html> </html>

7
components/layout/KeepOnlineWrapper.tsx
View File

@@ -1,7 +1,12 @@
"use client"; "use client";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import KeepOnline from "@/components/KeepOnline"; import dynamic from "next/dynamic";
// Lazy load KeepOnline component - only needed on dashboard pages
const KeepOnline = dynamic(() => import("@/components/KeepOnline"), {
ssr: false,
});
const KeepOnlineWrapper = () => { const KeepOnlineWrapper = () => {
const pathname = usePathname(); const pathname = usePathname();

34
components/layout/NotificationProviderWrapper.tsx Normal file
View 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}</>;
}

8
package-lock.json generated
View File

@@ -60,7 +60,7 @@
"tailwind-merge": "^2.5.5", "tailwind-merge": "^2.5.5",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"vaul": "^0.9.6", "vaul": "^0.9.6",
"zod": "^3.24.1" "zod": "^3.25.0"
}, },
"devDependencies": { "devDependencies": {
"@distube/ytdl-core": "^4.16.12", "@distube/ytdl-core": "^4.16.12",
@@ -10551,9 +10551,9 @@
} }
}, },
"node_modules/zod": { "node_modules/zod": {
"version": "3.24.1", "version": "3.25.76",
"resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz", "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
"integrity": "sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==", "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
"license": "MIT", "license": "MIT",
"funding": { "funding": {
"url": "https://github.com/sponsors/colinhacks" "url": "https://github.com/sponsors/colinhacks"