[Update] Add save success notification.

src-ui/app/others/snackbar_controller/ReactToastifyOverrideClass.scss

@@ -110,4 +110,35 @@
     min-width: 2.8rem;
     justify-content: center;
     align-items: center;
+}
+
+@keyframes fade_in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+@keyframes fade_out {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+.fade_in {
+    opacity: 0;
+    animation-name: fade_in;
+    animation-duration: 0.1s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+}
+.fade_out {
+    opacity: 1;
+    animation-name: fade_out;
+    animation-duration: 0.2s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
 }

src-ui/app/others/snackbar_controller/SnackbarController.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { ToastContainer, toast, Bounce } from "react-toastify";
+import { ToastContainer, toast, cssTransition } from "react-toastify";
 import clsx from "clsx";
 
 import "./ReactToastifyOverrideClass.scss";
@@ -13,6 +13,13 @@ import ErrorSvg from "@images/error.svg?react";
 
 import { useNotificationStatus } from "@logics_common";
 
+const CustomTransition = cssTransition({
+    enter: "fade_in",
+    exit: "fade_out",
+    collapse: false,
+});
+
+
 export const SnackbarController = () => {
     const { currentNotificationStatus, closeNotification } = useNotificationStatus();
     const [containerKey, setContainerKey] = useState(0);
@@ -35,34 +42,22 @@ export const SnackbarController = () => {
         hideDuration = Number(settings.options?.hide_duration);
     }
 
+    const to_hide_progress_bar = (settings.options?.to_hide_progress_bar === true) ? true : false;
+
     useEffect(() => {
         if (!settings.is_open) return;
 
         const message_text = settings.message;
+        const category_id = settings.category_id ? settings.category_id : message_text;
 
-        if (toast.isActive(message_text)) {
-            setContainerKey(prevKey => prevKey + 1);
+        setContainerKey(prevKey => prevKey + 1);
 
-            setTimeout(() => {
-                toast(message_text, {
-                    toastId: message_text,
-                    type: settings.status,
-                    autoClose: hideDuration,
-                    transition: Bounce,
-                    toastClassName: snackbar_classname,
-                    progressClassName: styles.toast_progress,
-                    closeButton: <CloseButtonContainer />,
-                    onClose: () => {
-                        closeNotification();
-                    },
-                });
-            }, 50);
-        } else {
+        setTimeout(() => {
             toast(message_text, {
-                toastId: message_text,
+                toastId: category_id,
                 type: settings.status,
                 autoClose: hideDuration,
-                transition: Bounce,
+                transition: CustomTransition,
                 toastClassName: snackbar_classname,
                 progressClassName: styles.toast_progress,
                 closeButton: <CloseButtonContainer />,
@@ -70,15 +65,15 @@ export const SnackbarController = () => {
                     closeNotification();
                 },
             });
-        }
-    }, [settings, hideDuration, closeNotification, snackbar_classname]);
+        }, 50);
+    }, [settings]);
 
     return (
         <ToastContainer
             key={containerKey}
             position="bottom-left"
-            transition={Bounce}
-            hideProgressBar={false}
+            transition={CustomTransition}
+            hideProgressBar={to_hide_progress_bar}
             newestOnTop={false}
             closeOnClick={false}
             pauseOnFocusLoss={false}