From a48a8ec945d8a5cde7419a22eca3b90493b3d18e Mon Sep 17 00:00:00 2001
From: Swayambhu <swayambhu94@gmail.com>
Date: Fri, 6 Feb 2026 15:35:11 +0530
Subject: [PATCH] refactor: Directly use Ant Design's `notification` hook
 instead of `App.useApp` for notification management.

---
 .../src/contexts/AntdGlobalProvider.tsx       | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/ui/litellm-dashboard/src/contexts/AntdGlobalProvider.tsx b/ui/litellm-dashboard/src/contexts/AntdGlobalProvider.tsx
index c5adbff86b2..5b5c1036fa9 100644
--- a/ui/litellm-dashboard/src/contexts/AntdGlobalProvider.tsx
+++ b/ui/litellm-dashboard/src/contexts/AntdGlobalProvider.tsx
@@ -1,29 +1,24 @@
 "use client";
 
 import React, { useEffect, useRef } from "react";
-import { App } from "antd";
+import { notification } from "antd";
 import { setNotificationInstance } from "@/components/molecules/notifications_manager";
 
-// Inner component to use the hook
-const AntdAppInit = () => {
-  const { notification } = App.useApp();
+export default function AntdGlobalProvider({ children }: { children: React.ReactNode }) {
+  const [api, contextHolder] = notification.useNotification();
   const initialized = useRef(false);
 
   useEffect(() => {
     if (!initialized.current) {
-      setNotificationInstance(notification);
+      setNotificationInstance(api);
       initialized.current = true;
     }
-  }, [notification]);
+  }, [api]);
 
-  return null;
-};
-
-export default function AntdGlobalProvider({ children }: { children: React.ReactNode }) {
   return (
-    <App>
-      <AntdAppInit />
+    <>
+      {contextHolder}
       {children}
-    </App>
+    </>
   );
 }