From 20a14ca68950aa69671b9e412c68e4e7c0107ace Mon Sep 17 00:00:00 2001
From: Fernando <ultimoround@gmail.com>
Date: Tue, 6 Oct 2020 11:07:06 -0300
Subject: [PATCH] Added animation to Inbox note deletion
 (https://github.com/woocommerce/woocommerce-admin/pull/5263)

This commit adds an animation to Inbox note deletion

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
---
 .../client/inbox-panel/index.js               | 41 +++++++++++--------
 .../client/inbox-panel/style.scss             | 26 ++++++++++++
 2 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/plugins/woocommerce-admin/client/inbox-panel/index.js b/plugins/woocommerce-admin/client/inbox-panel/index.js
index 23806c6afed..33d8f4008a5 100644
--- a/plugins/woocommerce-admin/client/inbox-panel/index.js
+++ b/plugins/woocommerce-admin/client/inbox-panel/index.js
@@ -11,6 +11,7 @@ import {
 	QUERY_DEFAULTS,
 } from '@woocommerce/data';
 import { withSelect } from '@wordpress/data';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 /**
  * Internal dependencies
@@ -46,23 +47,29 @@ const renderNotes = ( { hasNotes, isBatchUpdating, lastRead, notes } ) => {
 
 	const notesArray = Object.keys( notes ).map( ( key ) => notes[ key ] );
 
-	return notesArray.map( ( note ) => {
-		if ( note.isUpdating ) {
-			return (
-				<InboxNotePlaceholder
-					className="banner message-is-unread"
-					key={ note.id }
-				/>
-			);
-		}
-		return (
-			<InboxNoteCard
-				key={ note.id }
-				note={ note }
-				lastRead={ lastRead }
-			/>
-		);
-	} );
+	return (
+		<TransitionGroup role="menu">
+			{ notesArray.map( ( note ) => {
+				const { id: noteId, is_deleted: isDeleted } = note;
+				if ( isDeleted ) {
+					return null;
+				}
+				return (
+					<CSSTransition
+						key={ noteId }
+						timeout={ 500 }
+						classNames="woocommerce-inbox-message"
+					>
+						<InboxNoteCard
+							key={ noteId }
+							note={ note }
+							lastRead={ lastRead }
+						/>
+					</CSSTransition>
+				);
+			} ) }
+		</TransitionGroup>
+	);
 };
 
 const InboxPanel = ( props ) => {
diff --git a/plugins/woocommerce-admin/client/inbox-panel/style.scss b/plugins/woocommerce-admin/client/inbox-panel/style.scss
index 12693654d9e..fb82b6dcc55 100644
--- a/plugins/woocommerce-admin/client/inbox-panel/style.scss
+++ b/plugins/woocommerce-admin/client/inbox-panel/style.scss
@@ -217,3 +217,29 @@
 		}
 	}
 }
+
+.woocommerce-inbox-message-enter {
+	opacity: 0;
+	max-height: 0;
+	transform: translateX(50%);
+}
+
+.woocommerce-inbox-message-enter-active {
+	opacity: 1;
+	max-height: 100vh;
+	transform: translateX(0%);
+	transition: opacity 500ms, transform 500ms, max-height 500ms;
+}
+
+.woocommerce-inbox-message-exit {
+	opacity: 1;
+	max-height: 100vh;
+	transform: translateX(0%);
+}
+
+.woocommerce-inbox-message-exit-active {
+	opacity: 0;
+	max-height: 0;
+	transform: translateX(50%);
+	transition: opacity 500ms, transform 500ms, max-height 500ms;
+}