From 3b3151e01b0e594cdcf385636fe782b5c96230df Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Sat, 26 Aug 2023 02:48:31 +0200
Subject: [PATCH] feat: create performant animations by not using max-height as
 transition prop

---
 .../ToastContainer/useToastContainer.ts       |  2 +-
 .../useToastContainerStyles.styles.ts         | 20 +++++++++----------
 .../Toaster/useToasterStyles.styles.ts        |  5 ++++-
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts
index 7421a50d6b979d..502abed16e381b 100644
--- a/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts
+++ b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts
@@ -77,7 +77,7 @@ export const useToastContainer_unstable = (
   useIsomorphicLayoutEffect(() => {
     const element = toastRef.current;
 
-    if (!['idle', 'unmounted'].includes(type) || !element) {
+    if (type !== 'entering' || !element) {
       return;
     }
 
diff --git a/packages/react-components/react-toast/src/components/ToastContainer/useToastContainerStyles.styles.ts b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainerStyles.styles.ts
index 62558ea11c23ab..d58d0eb0beb12f 100644
--- a/packages/react-components/react-toast/src/components/ToastContainer/useToastContainerStyles.styles.ts
+++ b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainerStyles.styles.ts
@@ -24,7 +24,6 @@ const useToastContainerBaseClassName = makeResetStyles({
   ...shorthands.borderRadius(tokens.borderRadiusMedium),
   [toastCSSVars.height]: '44px',
 
-  marginTop: '16px',
   minHeight: '44px',
   pointerEvents: 'all',
   boxSizing: 'border-box',
@@ -32,28 +31,27 @@ const useToastContainerBaseClassName = makeResetStyles({
 
 const useToastMotionStyles = makeStyles({
   root: {
-    maxHeight: 0,
-    marginTop: 0,
     opacity: 0,
-    transitionProperty: 'max-height, margin-top, opacity',
+    marginTop: `calc(var(${toastCSSVars.height}) * -1)`,
+    transitionProperty: 'opacity, margin-top',
     transitionTimingFunction: tokens.curveEasyEase,
-    willChange: 'max-height, margin-top, opacity',
+    willChange: 'opacity, margin-top',
   },
 
   visible: {
-    maxHeight: `var(${toastCSSVars.height})`,
-    marginTop: '16px',
     opacity: 1,
+    marginTop: '16px',
   },
 
   entering: {
-    transitionDuration: `${tokens.durationNormal}, ${tokens.durationNormal}, ${tokens.durationSlow}`,
-    transitionDelay: `0ms, 0ms, ${tokens.durationNormal}`,
+    transitionDuration: `${tokens.durationGentle}, ${tokens.durationNormal}`,
+    transitionDelay: `${tokens.durationNormal}, 0ms`,
   },
 
   exiting: {
-    transitionDuration: `${tokens.durationNormal}, ${tokens.durationNormal}, ${tokens.durationSlow}`,
-    transitionDelay: `${tokens.durationSlow}, ${tokens.durationSlow}, 0ms`,
+    marginTop: `calc(var(${toastCSSVars.height}) * -1)`,
+    transitionDuration: `${tokens.durationGentle}, ${tokens.durationNormal}`,
+    transitionDelay: `0ms, ${tokens.durationGentle}`,
   },
 });
 
diff --git a/packages/react-components/react-toast/src/components/Toaster/useToasterStyles.styles.ts b/packages/react-components/react-toast/src/components/Toaster/useToasterStyles.styles.ts
index a425ae5278798b..a1ad9cfa2d7d18 100644
--- a/packages/react-components/react-toast/src/components/Toaster/useToasterStyles.styles.ts
+++ b/packages/react-components/react-toast/src/components/Toaster/useToasterStyles.styles.ts
@@ -11,9 +11,12 @@ export const toasterClassNames: SlotClassNames<ToasterSlots> = {
  * Styles for the root slot
  */
 const useRootBaseClassName = makeResetStyles({
-  position: 'fixed',
   width: '292px',
+  position: 'fixed',
   pointerEvents: 'none',
+  /* TODO: Measure the performance of creating a 3D layer with these styles vs without */
+  transform: 'translateZ(0)',
+  perspective: '1000px',
 });
 
 /**