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
This commit is contained in:
Tim Down
2023-07-28 08:04:10 +00:00
committed by Copybot
parent e7479c789f
commit 98a847ae75
2 changed files with 11 additions and 11 deletions
@@ -39,7 +39,7 @@ export const dispatchReviewPanelLayout = (force = false) => {
const scheduleDispatchReviewPanelLayout = debounce( const scheduleDispatchReviewPanelLayout = debounce(
dispatchReviewPanelLayout, dispatchReviewPanelLayout,
50 10
) )
export type ChangeManager = { export type ChangeManager = {
@@ -307,11 +307,10 @@ export const createChangeManager = (
if (changed) { if (changed) {
dispatchEditorEvent('track-changes:visibility_changed') dispatchEditorEvent('track-changes:visibility_changed')
} }
dispatchReviewPanelLayout() // Ensure the layout is updated once the review panel entries have
// Ensure the layout is updated again once the review panel entries // updated in the React review panel. The use of a timeout is bad but
// have updated in the React review panel. The use of a timeout is bad // the timings are a bit of a mess and will be improved when the review
// but the timings are a bit of a mess and will be improved when the // panel state is migrated away from Angular
// review panel state is migrated away from Angular
scheduleDispatchReviewPanelLayout() scheduleDispatchReviewPanelLayout()
break break
} }
@@ -36,25 +36,26 @@ function AutoExpandingTextArea({
...rest ...rest
}: AutoExpandingTextAreaProps) { }: AutoExpandingTextAreaProps) {
const ref = useRef<HTMLTextAreaElement>(null) const ref = useRef<HTMLTextAreaElement>(null)
const isFirstResizeRef = useRef(true)
useEffect(() => { useEffect(() => {
if (!ref.current || !onResize || !('ResizeObserver' in window)) { if (!ref.current || !onResize || !('ResizeObserver' in window)) {
return return
} }
let isFirstResize = true
const resizeObserver = new ResizeObserver(() => { const resizeObserver = new ResizeObserver(() => {
// Ignore the resize that is triggered when the element is first // Ignore the resize that is triggered when the element is first
// inserted into the DOM // inserted into the DOM
if (isFirstResize) { if (isFirstResizeRef.current) {
isFirstResize = false isFirstResizeRef.current = false
} else { } else {
// Prevent errors like "ResizeObserver loop completed with undelivered // Prevent errors like "ResizeObserver loop completed with undelivered
// notifications" that occur if onResize does something complicated. // notifications" that occur if onResize does something complicated.
// The cost of this is that onResize lags one frame behind, but it's // The cost of this is that onResize lags one frame behind, but it's
// unlikely to matter. // unlikely to matter.
window.requestAnimationFrame(onResize)
// Wrap onResize to prevent extra parameters being passed
window.requestAnimationFrame(() => onResize())
} }
}) })