From c7c4644b3f5f3158764fc7811e3ddbcd5c31b3bd Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Wed, 1 Oct 2025 12:49:14 +0000
Subject: [PATCH] Fix: Resolve React hook errors in Novu integration

---
 .../notifications/NotificationCenter.tsx      | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/notifications/NotificationCenter.tsx b/src/components/notifications/NotificationCenter.tsx
index d278c247..68e57724 100644
--- a/src/components/notifications/NotificationCenter.tsx
+++ b/src/components/notifications/NotificationCenter.tsx
@@ -1,7 +1,14 @@
-import { Inbox } from '@novu/react';
+import { lazy, Suspense } from 'react';
 import { useNovuNotifications } from '@/hooks/useNovuNotifications';
 import { useNovuTheme } from '@/hooks/useNovuTheme';
 import { useNavigate } from 'react-router-dom';
+import { Bell } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+// Lazy load Novu Inbox to prevent React instance conflicts
+const Inbox = lazy(() => 
+  import('@novu/react').then(module => ({ default: module.Inbox }))
+);
 
 export function NotificationCenter() {
   const { applicationIdentifier, subscriberId, isEnabled } = useNovuNotifications();
@@ -20,11 +27,19 @@ export function NotificationCenter() {
   };
 
   return (
-    <Inbox
-      applicationIdentifier={applicationIdentifier}
-      subscriberId={subscriberId}
-      appearance={appearance}
-      onNotificationClick={handleNotificationClick}
-    />
+    <Suspense 
+      fallback={
+        <Button variant="ghost" size="icon" className="h-9 w-9" disabled>
+          <Bell className="h-5 w-5" />
+        </Button>
+      }
+    >
+      <Inbox
+        applicationIdentifier={applicationIdentifier}
+        subscriberId={subscriberId}
+        appearance={appearance}
+        onNotificationClick={handleNotificationClick}
+      />
+    </Suspense>
   );
 }