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

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
       }

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())
       }
     })