From b4cf56a0c17d2715d585354e3dbe073ee4b46714 Mon Sep 17 00:00:00 2001
From: Florian Pichler <fp@ylk.gd>
Date: Wed, 15 Dec 2021 13:09:36 +0100
Subject: [PATCH] Refactor: Use `animationend` event to remove notification

Much more stable than setTimeout and no longer blocks tests
---
 addon/components/notification-message.js      | 16 +++++++++++++++-
 addon/services/notifications.js               | 19 +++++++------------
 .../components/notification-message.hbs       |  1 +
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/addon/components/notification-message.js b/addon/components/notification-message.js
index abd74991..27e911f3 100644
--- a/addon/components/notification-message.js
+++ b/addon/components/notification-message.js
@@ -88,7 +88,8 @@ export default class NotificationMessage extends Component {
   removeNotification(event) {
     event.preventDefault();
     event.stopPropagation();
-    this.notifications.removeNotification(this.notification);
+
+    this.notifications.dismissNotification(this.notification);
   }
 
   @action
@@ -110,4 +111,17 @@ export default class NotificationMessage extends Component {
       this.notifications.setupAutoClear(notification);
     }
   }
+
+  @action
+  handleAnimationEnd({ animationName }) {
+    let notification = this.notification;
+
+    if (!notification.dismiss) {
+      return;
+    }
+
+    if (animationName.endsWith('-out')) {
+      this.notifications.removeNotification(notification);
+    }
+  }
 }
diff --git a/addon/services/notifications.js b/addon/services/notifications.js
index 2027925e..fc3793bb 100644
--- a/addon/services/notifications.js
+++ b/addon/services/notifications.js
@@ -71,21 +71,16 @@ export default class NotificationsService extends Service {
     });
   }
 
+  dismissNotification(notification) {
+    set(notification, 'dismiss', true);
+  }
+
   removeNotification(notification) {
     if (!notification) {
       return;
     }
 
-    notification.set('dismiss', true);
-
-    // Delay removal from DOM for dismissal animation
-    later(
-      this,
-      () => {
-        this.content.removeObject(notification);
-      },
-      500
-    );
+    this.content.removeObject(notification);
   }
 
   setupAutoClear(notification) {
@@ -96,7 +91,7 @@ export default class NotificationsService extends Service {
       () => {
         // Hasn't been closed manually
         if (this.content.indexOf(notification) >= 0) {
-          this.removeNotification(notification);
+          this.dismissNotification(notification);
         }
       },
       notification.remaining
@@ -116,7 +111,7 @@ export default class NotificationsService extends Service {
 
   clearAll() {
     this.content.forEach((notification) => {
-      this.removeNotification(notification);
+      this.dismissNotification(notification);
     });
 
     return this;
diff --git a/addon/templates/components/notification-message.hbs b/addon/templates/components/notification-message.hbs
index 0068bc80..81e04db1 100644
--- a/addon/templates/components/notification-message.hbs
+++ b/addon/templates/components/notification-message.hbs
@@ -7,6 +7,7 @@
     {{@notification.cssClasses}}"
   data-test-notification-message={{@notification.type}}
   role="alert"
+  {{on "animationend" this.handleAnimationEnd}}
   {{on "mouseenter" this.handleMouseEnter}}
   {{on "mouseleave" this.handleMouseLeave}}
 >