From 658e8be50b2b709920b2da350c366abd99837bf6 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 20 May 2023 13:06:14 +0200
Subject: [PATCH] [docs] Smooth performance animation (#8986)

---
 .../performance/GridWithReactMemo.js          | 31 ++++++++++++-------
 .../performance/GridWithReactMemo.tsx         | 31 ++++++++++++-------
 2 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/docs/data/data-grid/performance/GridWithReactMemo.js b/docs/data/data-grid/performance/GridWithReactMemo.js
index a99fbe9953eed..1a4c6650f32e4 100644
--- a/docs/data/data-grid/performance/GridWithReactMemo.js
+++ b/docs/data/data-grid/performance/GridWithReactMemo.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { teal } from '@mui/material/colors';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { DataGridPro, GridRow, GridColumnHeaders } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
@@ -11,13 +10,17 @@ const TraceUpdates = React.forwardRef((props, ref) => {
   const handleRef = useForkRef(rootRef, ref);
 
   React.useEffect(() => {
-    rootRef.current?.classList.add('updating');
+    const root = rootRef.current;
+    root.classList.add('updating');
+    root.classList.add('updated');
 
     const timer = setTimeout(() => {
-      rootRef.current?.classList.remove('updating');
-    }, 500);
+      root.classList.remove('updating');
+    }, 360);
 
-    return () => clearTimeout(timer);
+    return () => {
+      clearTimeout(timer);
+    };
   });
 
   return <Component ref={handleRef} {...other} />;
@@ -47,12 +50,18 @@ export default function GridWithReactMemo() {
       sx={{
         height: 400,
         width: '100%',
-        '&&& .updating': (theme) => ({
-          background: teal[theme.palette.mode === 'dark' ? 900 : 100],
-          transition: theme.transitions.create('background', {
-            duration: theme.transitions.duration.standard,
-          }),
-        }),
+        '&&& .updated': {
+          transition: (theme) =>
+            theme.transitions.create(['background-color', 'outline'], {
+              duration: theme.transitions.duration.standard,
+            }),
+        },
+        '&&& .updating': {
+          backgroundColor: 'rgb(92 199 68 / 25%)',
+          outline: '1px solid rgb(92 199 68 / 35%)',
+          outlineOffset: '-1px',
+          transition: 'none',
+        },
       }}
     >
       <DataGridPro
diff --git a/docs/data/data-grid/performance/GridWithReactMemo.tsx b/docs/data/data-grid/performance/GridWithReactMemo.tsx
index f933dd3749024..db1a5ea400bb1 100644
--- a/docs/data/data-grid/performance/GridWithReactMemo.tsx
+++ b/docs/data/data-grid/performance/GridWithReactMemo.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { teal } from '@mui/material/colors';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { DataGridPro, GridRow, GridColumnHeaders } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
@@ -11,13 +10,17 @@ const TraceUpdates = React.forwardRef<any, any>((props, ref) => {
   const handleRef = useForkRef(rootRef, ref);
 
   React.useEffect(() => {
-    rootRef.current?.classList.add('updating');
+    const root = rootRef.current;
+    root!.classList.add('updating');
+    root!.classList.add('updated');
 
     const timer = setTimeout(() => {
-      rootRef.current?.classList.remove('updating');
-    }, 500);
+      root!.classList.remove('updating');
+    }, 360);
 
-    return () => clearTimeout(timer);
+    return () => {
+      clearTimeout(timer);
+    };
   });
 
   return <Component ref={handleRef} {...other} />;
@@ -47,12 +50,18 @@ export default function GridWithReactMemo() {
       sx={{
         height: 400,
         width: '100%',
-        '&&& .updating': (theme) => ({
-          background: teal[theme.palette.mode === 'dark' ? 900 : 100],
-          transition: theme.transitions.create('background', {
-            duration: theme.transitions.duration.standard,
-          }),
-        }),
+        '&&& .updated': {
+          transition: (theme) =>
+            theme.transitions.create(['background-color', 'outline'], {
+              duration: theme.transitions.duration.standard,
+            }),
+        },
+        '&&& .updating': {
+          backgroundColor: 'rgb(92 199 68 / 25%)',
+          outline: '1px solid rgb(92 199 68 / 35%)',
+          outlineOffset: '-1px',
+          transition: 'none',
+        },
       }}
     >
       <DataGridPro