From 39c073634ca41b2a4bf396959553f925223e6820 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Fri, 16 May 2025 06:56:21 -0300
Subject: [PATCH] feat: animation update

---
 .../notification/achievement-notification.scss        |  3 +++
 .../notification/achievement-notification.tsx         | 11 +++++------
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/renderer/src/pages/achievements/notification/achievement-notification.scss b/src/renderer/src/pages/achievements/notification/achievement-notification.scss
index c919275f..e62f4100 100644
--- a/src/renderer/src/pages/achievements/notification/achievement-notification.scss
+++ b/src/renderer/src/pages/achievements/notification/achievement-notification.scss
@@ -251,6 +251,7 @@ $margin-vertical: 52px;
     flex-direction: column;
     gap: 4px;
     width: 100%;
+    overflow: hidden;
   }
 
   &__title {
@@ -258,6 +259,7 @@ $margin-vertical: 52px;
     font-weight: 700;
     white-space: nowrap;
     overflow: hidden;
+    text-overflow: ellipsis;
     color: globals.$muted-color;
     animation: title-in 450ms ease-in-out 900ms;
   }
@@ -267,6 +269,7 @@ $margin-vertical: 52px;
     font-weight: 400;
     white-space: nowrap;
     overflow: hidden;
+    text-overflow: ellipsis;
     color: globals.$body-color;
     animation: description-in 450ms ease-in-out 900ms;
   }
diff --git a/src/renderer/src/pages/achievements/notification/achievement-notification.tsx b/src/renderer/src/pages/achievements/notification/achievement-notification.tsx
index 4689e0d9..d86d83cf 100644
--- a/src/renderer/src/pages/achievements/notification/achievement-notification.tsx
+++ b/src/renderer/src/pages/achievements/notification/achievement-notification.tsx
@@ -8,7 +8,7 @@ import {
   AchievementNotificationInfo,
 } from "@types";
 
-const NOTIFICATION_TIMEOUT = 6000;
+const NOTIFICATION_TIMEOUT = 4000;
 
 export function AchievementNotification() {
   const { t } = useTranslation("achievement");
@@ -100,6 +100,7 @@ export function AchievementNotification() {
           closingAnimation.current = requestAnimationFrame(animateClosing);
         } else {
           setIsVisible(false);
+          setAchievements((ach) => ach.slice(1));
         }
       }
     );
@@ -118,15 +119,13 @@ export function AchievementNotification() {
         function animateLock(time) {
           if (time - zero > NOTIFICATION_TIMEOUT) {
             zero = performance.now();
-            setAchievements((ach) => ach.slice(1));
+            startAnimateClosing();
           }
           achievementAnimation.current = requestAnimationFrame(animateLock);
         }
       );
-    } else {
-      startAnimateClosing();
     }
-  }, [hasAchievementsPending, startAnimateClosing]);
+  }, [hasAchievementsPending, startAnimateClosing, currentAchievement]);
 
   useEffect(() => {
     if (achievements.length) {
@@ -145,8 +144,8 @@ export function AchievementNotification() {
     >
       <div
         className={cn("achievement-notification__container", {
-          closing: isClosing,
           [position]: true,
+          closing: isClosing,
         })}
       >
         <div className="achievement-notification__content">