fix notification animation

Author: christiansamaniego-okta

src/features/common/components/notification/notification.module.scss

@@ -11,8 +11,8 @@
   font-weight: 500;
   z-index: 9010;
   animation:
-    fadeIn 0.3s,
-    fadeOut 0.3s 1.7s;
+    fadeIn 0.3s forwards,
+    fadeOut 0.3s 1.7s forwards;
   box-shadow:
     0 0 0 1px rgba(0, 0, 0, 0.12),
     0 2px 2px -1px rgba(0, 0, 0, 0.04),

src/features/common/components/site-brand/site-brand.component.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useEffect, useState } from "react";
+import React, { PropsWithChildren, useCallback, useEffect, useState } from "react";
 import styles from "./site-brand.module.scss";
 import Link from "next/link";
 import { getBrandDictionary } from "@/features/localization/services/brand-dictionary.service";
@@ -34,6 +34,10 @@ export const SiteBrandComponent: React.FC<SiteBrandComponentProps> = ({
     setMenuPosition(null);
   };
 
+  const handleNotificationClose = useCallback(() => {
+    setIsCopied(false);
+  }, [])
+
   useEffect(() => {
     // Hide the menu on any click on the document
     document.addEventListener("click", handleCloseMenu);
@@ -69,7 +73,7 @@ export const SiteBrandComponent: React.FC<SiteBrandComponentProps> = ({
       </Link>
       <ContextMenu dictionary={brandDictionary} position={menuPosition} setIsCopied={setIsCopied}/>
       {isCopied && (
-        <Notification message={brandDictionary.alertMessage} onClose={() => setIsCopied(false)}/>
+        <Notification message={brandDictionary.alertMessage} onClose={handleNotificationClose}/>
       )}
     </div>
   );