From 98a847ae753c60bfaf97106920c52be20d930dfd Mon Sep 17 00:00:00 2001
From: Tim Down <158919+timdown@users.noreply.github.com>
Date: Thu, 27 Jul 2023 10:55:10 +0100
Subject: [PATCH] Merge pull request #14059 from
 overleaf/td-review-panel-smoother-chrome

React review panel: fix regression that made animation jerky on Chrome

GitOrigin-RevId: c1d9fa00d478fa71d94ff705ddfcc12bab0b2767
---
 .../extensions/changes/change-manager.ts              | 11 +++++------
 .../js/shared/components/auto-expanding-text-area.tsx | 11 ++++++-----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/extensions/changes/change-manager.ts b/services/web/frontend/js/features/source-editor/extensions/changes/change-manager.ts
index 430211fd65..0e587b4108 100644
--- a/services/web/frontend/js/features/source-editor/extensions/changes/change-manager.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/changes/change-manager.ts
@@ -39,7 +39,7 @@ export const dispatchReviewPanelLayout = (force = false) => {
 
 const scheduleDispatchReviewPanelLayout = debounce(
   dispatchReviewPanelLayout,
-  50
+  10
 )
 
 export type ChangeManager = {
@@ -307,11 +307,10 @@ export const createChangeManager = (
         if (changed) {
           dispatchEditorEvent('track-changes:visibility_changed')
         }
-        dispatchReviewPanelLayout()
-        // Ensure the layout is updated again once the review panel entries
-        // have updated in the React review panel. The use of a timeout is bad
-        // but the timings are a bit of a mess and will be improved when the
-        // review panel state is migrated away from Angular
+        // Ensure the layout is updated once the review panel entries have
+        // updated in the React review panel. The use of a timeout is bad but
+        // the timings are a bit of a mess and will be improved when the review
+        // panel state is migrated away from Angular
         scheduleDispatchReviewPanelLayout()
         break
       }
diff --git a/services/web/frontend/js/shared/components/auto-expanding-text-area.tsx b/services/web/frontend/js/shared/components/auto-expanding-text-area.tsx
index 149de71663..9620e27540 100644
--- a/services/web/frontend/js/shared/components/auto-expanding-text-area.tsx
+++ b/services/web/frontend/js/shared/components/auto-expanding-text-area.tsx
@@ -36,25 +36,26 @@ function AutoExpandingTextArea({
   ...rest
 }: AutoExpandingTextAreaProps) {
   const ref = useRef<HTMLTextAreaElement>(null)
+  const isFirstResizeRef = useRef(true)
 
   useEffect(() => {
     if (!ref.current || !onResize || !('ResizeObserver' in window)) {
       return
     }
 
-    let isFirstResize = true
-
     const resizeObserver = new ResizeObserver(() => {
       // Ignore the resize that is triggered when the element is first
       // inserted into the DOM
-      if (isFirstResize) {
-        isFirstResize = false
+      if (isFirstResizeRef.current) {
+        isFirstResizeRef.current = false
       } else {
         // Prevent errors like "ResizeObserver loop completed with undelivered
         // notifications" that occur if onResize does something complicated.
         // The cost of this is that onResize lags one frame behind, but it's
         // unlikely to matter.
-        window.requestAnimationFrame(onResize)
+
+        // Wrap onResize to prevent extra parameters being passed
+        window.requestAnimationFrame(() => onResize())
       }
     })