Refactor: Use animationend event to remove notification

Much more stable than setTimeout and no longer blocks tests
mansona · Dec 15, 2021 · b4cf56a · b4cf56a
1 parent e563265
commit b4cf56a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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}}
 >